Techné is the name of the UI design guidelines for YaaS. And it defines the principles and components for mobile-first, user-centered UX design on YaaS. Techné design patterns focus on delivering an experience that reflects what we call “the consumerization of business user tooling.” It’s an ethos that says an experience designed for those working in any kind of development, administrative or “back office” type scenario should drop the utilitarian design mentality and embrace the same interactions, visualizations, and flows to accomplish their tasks as any consumer-facing experience.

 

Three important aspects of Techné

Mobile first

Techné is built on the premise of mobile first and responsive design. Today, mobile first has become a kind of design slogan, and for good reason. The growing mobile usage, highly diverse devices and different places and situations to interact with a website, service or application led to the situation that people began to worry that they were focusing on the wrong devices. With this in mind, Techné took a different approach to designing for mobile right from the start. Techné and the underlying Bootstrap is mobile first in the sense that the code starts by targeting smaller screens, and then increases components and grids for larger screens.

 

User-centered user experience design

Techné provides a consistent and holistic user experience for YaaS. By creating visually pleasing designs with a strong focus on ease-of-use, the experience is intuitive and simple across all devices. With its simple and plain interaction patterns, Techné provides a powerful and consistent look and feel across YaaS and its microservices.

 

Freedom of technology

Techné is NOT another UI framework. It’s not a MVC (Model-View-Controller) framework and does not prescribe a data-binding language. Techné gives developers the freedom to use the technology they’re most comfortable with. There’s no technology baked into our components and patterns. Techné is open-source and meant to be community-driven.
To find the latest code and build personal projects please visit https://github.com/SAP/techne .

 

Learn more about Techné’s design principles: https://techne.yaas.io/Guidelines.html#guidelines-design-principles

 

 

 

Basics and design elements of Techné

Techné’s responsive design approach makes the development easy by offering UI controls that automatically adjust to different form factors and interaction styles. The advantage of Techné’s responsive design approach is that apps can adjust to different screen sizes without requiring additional coding and maintenance efforts.

Techné provides:

  1. Components
  2. Patterns
  3. Starter Pages

 

1. Components

Components are the basic building blocks – such as labels, input fields, or buttons. They range from A as in Alerts to Z as in Zoom. Components can also include more abstract elements like color palettes, fonts and even more dynamic aspects of an interface like animations.

Here are examples for components

 

Input field:

UX article - input field

 

Pagination:

UX article - pagination

Source: https://techne.yaas.io/components/Alerts-Errors-Notifications.html

 

 

2. Patterns

Patterns are groups of components which are bound together and are the smallest fundamental units of a compound. Patterns take on their own properties and serve as the backbone of the Techné design.

 

Here are example for patterns

 

Form:

UX article - form and input fields

 

Toolbar and one part is the pagination, mentioned before:

UX article - toolbar

Source: https://techne.yaas.io/patterns/Toolbar.html

 

 

3. Starter Pages

Patterns give us some building blocks to work with, and we can now combine them together to form UIs for Yaas. The section ‘Starter Pages’ shows illustrative examples – groups of patterns joined together to form a relatively complex, distinct section of an interface for YaaS.

Here is an example for a Starter Page

Table and one part is the toolbar, mentioned before:

UX article - starter page

Source: https://techne.yaas.io/starterpages/start.html

Learn more about the Techné’s Design Elements: https://techne.yaas.io/components/Alerts-Errors-Notifications.html

 

 

 

The personas of Techné

Techné focus on four persons

Capture_Personas_YaaS_20161128

 

The Consumer

A consumer expects a unified experience across channels and devices; how they want it, where they want it, when they want it.

 

The Creator

Our Marketers, Merchandisers, Product Managers and other Designer people

 

The Enabler

Our IT, Operations, Customer Service, Order Management people

 

The Developer

The heart of YaaS. They need stability, community and tools that don’t get in their way

 

Learn more about the Techné’s Personas: https://techne.yaas.io/
Learn more about personas and what a persona is: https://experience.sap.com/basics/what-is-a-persona/

 

 

Techné and the interplay with UI5

Techné is also designed to be complementary to the UI5 component library and UX designers and UI developers can mix and match components from either library to achieve the experience needed for their target users. Techné is, however, the standard for YaaS.

 


 

If you would like to know more about YaaS please visit YaaS.io or this blog on the SAP Community.

 

 

Not logged in
  • Mustafa Bensan   3 months ago

    Hi Holger,

    SAP’s UX Strategy states that all products will converge to the Fiori UX design. Techné therefore appears to be a new UX design guideline which is independent of the overall SAP UX Strategy. Can you clarify?

    Thanks,

    Mustafa.

    • Holger Maassen   3 months ago

      Dear Mustafa

      Techné is a Visual Guideline and Component Library: Without a specific Framework – one of the main differences with Fiori/UI5.

      Techné is actually more fitted to develop YaaS modules – meaning Techné is the Visual Guideline and Component Library (Without a specific Framework – one of the main differences with Fiori/UI5) to build consistency across UIs for the builder on YaaS (The builder (https://builder.yaas.io/) is the integrated backoffice space of YaaS where the subscriber can use and maintain the YaaS’ packages to which they subscribed).

      It is possible to use Fiori controls within Builder to add an interaction or pattern that doesn’t already exist in Techne
      – UI5 and Techne are meant to be complementary – not in competition.

      SAP Fiori is the UX for SAP apps, software and cloud solutions. That means if you do not develop an UI for the YaaS builder – Fiori was, is and will be your UX, and the SAP Fiori Design Guidelines should be followed.

      In this context I’d like to point you to the article on the SAP Community – where you can find the article about YaaS: https://blogs.sap.com/2016/11/24/the-power-of-yaas-sap-hybris-as-a-service/

      I want to thank you for taking the time to write your comment – especially as there might be one or two who has the same question in mind – Thank you !

      Best Holger