Tweet
Tweet

Slide 1

Slide 1 text

Pretty but Not Usable Stéphanie Walter - @walterstephanie

Slide 2

Slide 2 text

UX & Product Designer Mobile expert. Pixel & CSS Lover stephaniewalter.design @WalterStephanie

Slide 3

Slide 3 text

My job is to find the best solution to solve 
 users’ problems

Slide 4

Slide 4 text

A library of generic UI components

Slide 5

Slide 5 text

It’s the story of a project…

Slide 6

Slide 6 text

Mr. Client had a nice idea

Slide 7

Slide 7 text

The dream team Stéphanie Walter - 2019 A team of developers A design team A team of iOS developers

Slide 8

Slide 8 text

“By the waaaaay, who will take care of the design of the iPad app?” The $1,000,000 question

Slide 9

Slide 9 text

“We take care of the whole design process” “Their designers will put some paint 
 on top of our UI framework components” VS Us Them

Slide 10

Slide 10 text

More than 15 actions, going back and forth in the tabs to complete the task 1 2 3 1 2 3 1 2 3

Slide 11

Slide 11 text

“Suggestions to make it more usable? Sure, but we can’t build custom components so stick to the framework” #deadlines #budget

Slide 12

Slide 12 text

“Just put some paint on the components and make it look 
 nice and pretty” #makeitpretty #makeitshiny

Slide 13

Slide 13 text

We made it nice, we made it shiny. 
 Sadly, shiny wasn't enough. #makeitpretty #makeitshiny

Slide 14

Slide 14 text

1 morning, 2 designers, 1 new user flow

Slide 15

Slide 15 text

“The pretty (but not usable app) should do the job, we will implement your design in the next version” #deadline #budget

Slide 16

Slide 16 text

Why did this happen?

Slide 17

Slide 17 text

Don’t blame the tool, blame the process!

Slide 18

Slide 18 text

How might we work with those UI frameworks and still put the users 
 in the center of the process?

Slide 19

Slide 19 text

Don’t Skip User Research 01

Slide 20

Slide 20 text

But… but we don’t have “UX people” But… we don’t have the time But… we don’t have budget But…

Slide 21

Slide 21 text

But… but we don’t have “UX people” But… we don’t have the time But… we don’t have budget But… Everyone in your team is responsible for the user experience of your products.

Slide 22

Slide 22 text

But… Here are some guerrilla 
 user research techniques

Slide 23

Slide 23 text

Ask the support

Slide 24

Slide 24 text

Online user feedback

Slide 25

Slide 25 text

Analytics & backend data

Slide 26

Slide 26 text

Street Guerilla Interviews

Slide 27

Slide 27 text

Remote interviews

Slide 28

Slide 28 text

If you had a magic wand, what would you change to make this activity/task easier for you? Can you remember you biggest pain or issue when trying to perform this activity? How do you overcome this today? Interactions Dependencia Pain points What actions or decisions do you take in order to accomplish this? Describe an activity or task that requires you to use Scrap« in your dailywork. Are they other actions/ people you need in order to perform this activity? Activity How? changes Rythm & duration Hew long does it take? Objects Are they other tools you need irt order to perform your activity? ^ Priority If you had a magic wand, what would you change to make this activity/task Can you remember you biggest pain Interactions V- Dependencies Describe an activity or task that requires you to use Scrap« in your dailywork. What actions or decisions do you take in order to accomplish this? Magic Are they other actions/ people you need in order to perform this activity? Activity How? How do you overcome this today? A'rfw-J- dL Identify and analyse users’ goals and tasks

Slide 29

Slide 29 text

Build user flows

Slide 30

Slide 30 text

Try to involve the development teams when building user flows. #Quicktip

Slide 31

Slide 31 text

What do I need on each page?

Slide 32

Slide 32 text

Learn about & study the framework 02

Slide 33

Slide 33 text

Try to know early if there’s going to be a UI framework involved. 
 Then take a look at the documentation. #Quicktip

Slide 34

Slide 34 text

UI components overview

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Use and challenge the components 03

Slide 38

Slide 38 text

Component documentation Paper wireframe

Slide 39

Slide 39 text

If you can’t find a component,
 ask your developer if it exists. #Quicktip

Slide 40

Slide 40 text

Source: Shan Shen

Slide 41

Slide 41 text

Turn this into a collaborative exercice

Slide 42

Slide 42 text

Don’t distort your users problems to make them fit into the framework UI solutions Crédit photo Jérémie Cohen NOPE!

Slide 43

Slide 43 text

Challenge the components when necessary What they wanted to use

Slide 44

Slide 44 text

Challenge the components when necessary What they wanted to use What suits the user needs

Slide 45

Slide 45 text

We need the knowledge and collaboration of both designs and developers to chose the right component Crédit photo Julie Muller

Slide 46

Slide 46 text

From paper wireframes…

Slide 47

Slide 47 text

… to prototype usability testing

Slide 48

Slide 48 text

Prototype and test early!

Slide 49

Slide 49 text

UI component based wireframes

Slide 50

Slide 50 text

Listing where they will be used

Slide 51

Slide 51 text

Style the components 04

Slide 52

Slide 52 text

As a designer, it’s tempting to change it all…

Slide 53

Slide 53 text

Anything that you can put in variables should be easy to customise

Slide 54

Slide 54 text

Be careful with accessibility

Slide 55

Slide 55 text

One family, different weight

Slide 56

Slide 56 text

Explicit labels are better than clumsy icons!

Slide 57

Slide 57 text

Built in specific behaviours and structure change of a component might be
 more complex

Slide 58

Slide 58 text

Framework

Slide 59

Slide 59 text

Framework Prototype

Slide 60

Slide 60 text

Calendar 15 April 2019 Expected Content 30 March 2019 Expected Content 30 April 2019 Expected Content Status 20100043 PIN Reference documents:: Content 28 Sept 2018 10 Jan 2018 Content 23 July 2018 Content John Doe 02 Jan 2019 Missing document for the moment Updated by: Updated updated on: Reference documents: Content Status 2 28 Sept 2018 Framework Prototype UI proposal

Slide 61

Slide 61 text

Ask your team about what’s easy to customise and what isn’t. Communication is key. #Quicktip

Slide 62

Slide 62 text

This is slowly becoming your product’s custom UI library.

Slide 63

Slide 63 text

Document and share 05

Slide 64

Slide 64 text

Why document?

Slide 65

Slide 65 text

Tables Table headings Table rows Collapsing table rows Table filters / search Table pagination Edit 540€ 3 planned works found in 1 intervention Christophe Grosjean 15/10/2018 To Send Edit 540€ 3 planned works found in 1 intervention Christophe Grosjean 10/11/2018 To Send We contacted him by mail COMMENTS 300€ Other reparation lo… - Recommended 40€ Tyre FR - Recommended 200€ Broken disc - Urgent WORKS DETAILS INT3RVENTION-N33MB3R Linked intervention: +352 00 000 000 [email protected] CUSTOMER DETAILS BMW 320d - PA9976 First Name Last Name Email Adresss Phone Number Last Update Table headings have a font size of 16 px. User can sort the column by using the double arrows next to the table heading title Table rows have an odd/even background. They can have action buttons on the right side of the table. The action button is always an outline button style Table rows can have collapsing elements. When they do, we use - the down arrow for collapsed rows - the up arrow for expanded rows Some tables might have filters / search functionnalities to help users navigate inside the data. Those fonctionalities are displayed on top of the table headings Tables display 10 items by default. At the bottom or the table, the pagination lets user navigate towards other items Grosjean Christophe +352 909 8990 10/04/2018 08:14:41 Grosjean Christophe +352 909 8990 10/04/2018 08:14:41 Filtres Filter Interventions 12/11/2018 A partir de: Cette semaine Aujourd’hui Tous First Name Last Name Email Adresss Phone Number Last Update 12/11/2018 As of: This Week Today All Filters First Name Last Name Email Adresss Phone Number Last Update 13 14 12 10 … 2 3 4 1 Buttons and links Primary buttons Primary buttons are used for the MAIN action on the page / view Default Desactivated Hover and active Button Button Button fill: #FFFFFF 100% border: 1px center * #0072CE 100% fill: #E3F0FF 100% border: 1px center * #8BB8E8 100% fill: #0072CE 100% border: 1px center * #0072CE 100% color: #0072CE 100% font-face: Roboto-Medium font-size: 14px color: #0072CE 100% font-face: Roboto-Medium font-size: 14px color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px Default Desactivated Hover and active Button Button Button Button Default Desactivated Hover and active fill: #0072CE 100% border: 1px center * #0072CE 100% fill: #8BB8E8 100% border: 1px center * #8BB8E8 100% fill: #005090 100% border: 1px center * #005090 100% color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px Button Button fill: #FFFFFF 100% border: 1px center * #A1A3A6 100% fill: #EDEDED 100% border: 1px center * #BABCBF 100% fill: #FFFFFF 100% border: 1px center * #0072CE 100% color: #5B6770 100% font-face: Roboto-Medium font-size: 14px color: #A1A3A6 100% font-face: Roboto-Medium font-size: 14px color: #0072CE 100% font-face: Roboto-Medium font-size: 14px Outline secondary buttons Outline secondary buttons are used for the secondary actions on the page / view, actions that are performed the less often. They are also used for filters, tabs and interface controls All dealers Filter Interventions All Filters Outline primary buttons Outline primary buttons are used for the secondary actions on the page / view, actions that are performed less often than the first one. They are also used for repeated actions like in table rows Examples Examples Examples Interventions New Intervention Create Latest customers Import Preview More Save Send Import Preview More Save Send Primary buttons like send and save are in blue Outline secondary buttons preview and import Colors - main palette Colors - secondary palette Text colors and background Background colors Accessibility rgba(0,114,206,1); #0072CE blue-50 rgba(0,80,144,1); #005090 blue-70 rgba(0,55,99,1); #003763 blue-80 rgba(139,184,232,1); #8BB8E8 blue-20 rgba(195,215,238,1); #C3D7EE blue-10 rgba(227,240,255,1); #E3F0FF blue-05 rgba(197,41,155,1); #C5299B fushia-50 What and when to use them?

Slide 66

Slide 66 text

How do they work?

Slide 67

Slide 67 text

Small Medium Large 3 Fuites 0 Température élevée 1 Saturation 8 Changes Événements cette semaine (évolution par rapport à la semaine dernière) Normale Protection Normale Température: Sur le corps Capteur Chambre 01 M. Rousseau 3 Fuites 0 Température élevée 1 Saturation 8 Changes Événements cette semaine (évolution par rapport à la semaine dernière) Normale Protection Normale Température: Sur le corps Capteur Chambre 01 M. Rousseau 3 Fuites 0 Température élevée 1 Saturation 8 Changes Événements cette semaine (évolution par rapport à la semaine dernière) Normale Protection : Sur le corps Capteur : Normale Température : Chambre 01 M. Rousseau 3 Fuites 0 Température élevée 1 Saturation 8 Changes Événements cette semaine (évolution par rapport à la semaine dernière) Normale Protection : Sur le corps Capteur : Normale Température : Chambre 01 M. Rousseau 3 Fuites 0 Température élevée 1 Saturation 8 Changes Événements cette semaine (évolution par rapport à la semaine dernière) Chambre 01 M. Rousseau A changer Protection : Sur le corps Capteur : Normale Température : Chambre 01 M. Rousseau 3 Fuites 0 Température élevée 1 Saturation 8 Changes Événements cette semaine (évolution par rapport à la semaine dernière) Normale Protection Elevée Température : Sur le corps Capteur Chambre 04 M.Martin 3 Fuites 0 Température élevée 1 Saturation 8 Changes Événements cette semaine (évolution par rapport à la semaine dernière) Normale Protection Normale Température: Sur le corps Capteur Chambre 05 M. Johnes 3 Fuites 0 Température élevée 1 Saturation 8 Changes Événements cette semaine (évolution par rapport à la semaine dernière) Normale Protection Normale Température: Hors du corps Capteur Chambre 01 M. Dupont Responsive adaptation

Slide 68

Slide 68 text

Discuss about what kind of hand-off are expected and how to deliver them. #Quicktip

Slide 69

Slide 69 text

Design specifications: Invision, Zeplin, Figma…

Slide 70

Slide 70 text

Sketch Measure

Slide 71

Slide 71 text

Don’t keep your awesome work a secret! The custom UI components in code A design style guide with custom UI components +

Slide 72

Slide 72 text

Storybook

Slide 73

Slide 73 text

What can be overridden ? baseweb.design

Slide 74

Slide 74 text

Some governance 
 is required

Slide 75

Slide 75 text

Check the quality of the product 06

Slide 76

Slide 76 text

Don’t forget the quality review “Raw” dev version

Slide 77

Slide 77 text

Don’t forget the quality review “Raw” dev version Dev version using the UI Framework

Slide 78

Slide 78 text

Don’t forget the quality review “Raw” dev version Dev version using the UI Framework Final version after quality review 100% 9:41 AM BMW Louyet Mons Rue des Sandrinettes, 48, 7033 Mons + 32 (63) 23 05 60 Dealership Bodyshop 7AM - 7PM Tuesday 7AM - 7PM Monday 7AM - 12AM 1PM-6PM Wednesday 7AM - 7PM Thursday 7AM - 7PM Friday 7AM - 7PM Saturday Opening hours

Slide 79

Slide 79 text

Designers, in quality reviews, 
 explain the design decisions behind the feedback. #Quicktip

Slide 80

Slide 80 text

User testing on before we launch

Slide 81

Slide 81 text

6 months after: is this still the right component?

Slide 82

Slide 82 text

It all comes down to communication & collaboration

Slide 83

Slide 83 text

Yes, it is possible to work with a UI frameworks and have a user centric process.

Slide 84

Slide 84 text

Building a great user experience with a UI framework is a team effort! UX Design UI Design Developpement

Slide 85

Slide 85 text

1. Don’t Skip User Research 2. Learn about & Study the framework 3. Use and challenge the components 4. Style the components 5. Document and share 6. Check the quality of the product

Slide 86

Slide 86 text

Thank you :) stephaniewalter.design @WalterStephanie