Save 37% off PRO during our Black Friday Sale! »

Pretty, but not Usable

Pretty, but not Usable

“Don't worry about the UI, we have a framework for that” they say. Then the designer's job is merely to paint over whatever product comes out of it. Does that sound frustratingly familiar?

How can we change this situation to bring user needs back in the process, while still working with an imposed framework? Let me share with you some stories from my projects, what worked but also failed. I want to help and inspire you find a collaboration process that will also work for your own teams.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

June 13, 2019
Tweet

Transcript

  1. Pretty but Not Usable Stéphanie Walter - @walterstephanie

  2. UX & Product Designer Mobile expert. Pixel & CSS Lover

    stephaniewalter.design @WalterStephanie
  3. My job is to find the best solution to solve

    
 users’ problems
  4. A library of generic UI components

  5. It’s the story of a project…

  6. Mr. Client had a nice idea

  7. The dream team Stéphanie Walter - 2019 A team of

    developers A design team A team of iOS developers
  8. “By the waaaaay, who will take care of the design

    of the iPad app?” The $1,000,000 question
  9. “We take care of the whole design process” “Their designers

    will put some paint 
 on top of our UI framework components” VS Us Them
  10. More than 15 actions, going back and forth in the

    tabs to complete the task 1 2 3 1 2 3 1 2 3
  11. “Suggestions to make it more usable? Sure, but we can’t

    build custom components so stick to the framework” #deadlines #budget
  12. “Just put some paint on the components and make it

    look 
 nice and pretty” #makeitpretty #makeitshiny
  13. We made it nice, we made it shiny. 
 Sadly,

    shiny wasn't enough. #makeitpretty #makeitshiny
  14. 1 morning, 2 designers, 1 new user flow

  15. “The pretty (but not usable app) should do the job,

    we will implement your design in the next version” #deadline #budget
  16. Why did this happen?

  17. Don’t blame the tool, blame the process!

  18. How might we work with those UI frameworks and still

    put the users 
 in the center of the process?
  19. Don’t Skip User Research 01

  20. But… but we don’t have “UX people” But… we don’t

    have the time But… we don’t have budget But…
  21. 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.
  22. But… Here are some guerrilla 
 user research techniques

  23. Ask the support

  24. Online user feedback

  25. Analytics & backend data

  26. Street Guerilla Interviews

  27. Remote interviews

  28. 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
  29. Build user flows

  30. Try to involve the development teams when building user flows.

    #Quicktip
  31. What do I need on each page?

  32. Learn about & study the framework 02

  33. Try to know early if there’s going to be a

    UI framework involved. 
 Then take a look at the documentation. #Quicktip
  34. UI components overview

  35. None
  36. None
  37. Use and challenge the components 03

  38. Component documentation Paper wireframe

  39. If you can’t find a component,
 ask your developer if

    it exists. #Quicktip
  40. Source: Shan Shen

  41. Turn this into a collaborative exercice

  42. Don’t distort your users problems to make them fit into

    the framework UI solutions Crédit photo Jérémie Cohen NOPE!
  43. Challenge the components when necessary What they wanted to use

  44. Challenge the components when necessary What they wanted to use

    What suits the user needs
  45. We need the knowledge and collaboration of both designs and

    developers to chose the right component Crédit photo Julie Muller
  46. From paper wireframes…

  47. … to prototype usability testing

  48. Prototype and test early!

  49. UI component based wireframes

  50. Listing where they will be used

  51. Style the components 04

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

  53. Anything that you can put in variables should be easy

    to customise
  54. Be careful with accessibility

  55. One family, different weight

  56. Explicit labels are better than clumsy icons!

  57. Built in specific behaviours and structure change of a component

    might be
 more complex
  58. Framework

  59. Framework Prototype

  60. 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
  61. Ask your team about what’s easy to customise and what

    isn’t. Communication is key. #Quicktip
  62. This is slowly becoming your product’s custom UI library.

  63. Document and share 05

  64. Why document?

  65. 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 christophe.grosjean@arhs-spikeseed.com 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?
  66. How do they work?

  67. 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
  68. Discuss about what kind of hand-off are expected and how

    to deliver them. #Quicktip
  69. Design specifications: Invision, Zeplin, Figma…

  70. Sketch Measure

  71. Don’t keep your awesome work a secret! The custom UI

    components in code A design style guide with custom UI components +
  72. Storybook

  73. What can be overridden ? baseweb.design

  74. Some governance 
 is required

  75. Check the quality of the product 06

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

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

    using the UI Framework
  78. 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
  79. Designers, in quality reviews, 
 explain the design decisions behind

    the feedback. #Quicktip
  80. User testing on before we launch

  81. 6 months after: is this still the right component?

  82. It all comes down to communication & collaboration

  83. Yes, it is possible to work with a UI frameworks

    and have a user centric process.
  84. Building a great user experience with a UI framework is

    a team effort! UX Design UI Design Developpement
  85. 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
  86. Thank you :) stephaniewalter.design @WalterStephanie