O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Less look, more feel

Próximos SlideShares
Managing Top Tasks
Managing Top Tasks
Carregando em…3

Confira estes a seguir

1 de 79 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Less look, more feel (20)


Mais recentes (20)


Less look, more feel

  1. 1. Less look, More feel @royscholten Frontend United Gent, 2016
  2. 2. UX design process How What Why
  3. 3. A process model for UX design
  4. 4. Customer personas, mental models, Market trends, competitors Product elevator pitch, high-level feature set
  5. 5. Concept visual, cust. journeys, scenarios Experience design principles, metrics Content key messages, content
  6. 6. Visual sketching, style tiles Interaction wireframes, flows, prototypes Content content model, sitemap
  7. 7. Design detailed designs, components Content producing it Code backend, frontend…
  8. 8. Design makes strategy concrete
  9. 9. Iterate towards the best possible solution
  10. 10. Why, What, How
  11. 11. Why, What, How ☜ you are here
  12. 12. Improve the How
  13. 13. https://articles.uie.com/three_hund_million_button/
  14. 14. http://limi.net/checkboxes-that-kill
  15. 15. Micro interactions Dan Saffer
  16. 16. Trigger
  17. 17. Trigger Something that initiates a microinteraction Make it recognizable as such Make it do the same thing each time If it looks like a button, it should act like a button The more used, the more visible
  18. 18. Rules
  19. 19. Rules Define what can and cannot be done Don't start from zero Reduce controls to a minimum Reduce options, have smart defaults Use the rules to prevent errors
  20. 20. Feedback
  21. 21. Feedback Understand what people need to know & when Feedback is for understanding the rules. Which rules should provide feedback? What is the context? Should the feedback be altered by it?
  22. 22. Loop
  23. 23. Loop http://layervault.tumblr.com/post/42361566927/progressive-reduction
  24. 24. Mode
  25. 25. Loops & modes Use modes when there is an infrequent action that would clutter the microinteraction Give a mode its own screen Use loops to extend the life of a microinteraction Use long loops to give microinteractions
  26. 26. Create your own checklist So you can do a design intake: what's there, what's missing?
  27. 27. Improve the how: • micro-interactions • create checklists
  28. 28. yes, But
  29. 29. Most decisions have already been made Why & What have already been decided on
  30. 30. Why, What ☜ how to get to here? How
  31. 31. Moving from How to What
  32. 32. Share that checklist with project manager and designer! Show don't tell: what is missing?
  33. 33. Suggest multiple ways to fill the gaps Quick & dirty: 4 hrs / Quality: 16 hrs Enable the team to make considered trade-offs
  34. 34. Start from the content model Different content types Their relations Ways they can be displayed
  35. 35. Easier to understand, resulting in better feedback
  36. 36. Responsive!
  37. 37. Easy to share. People can use it on their own device
  38. 38. Forces the use of real content
  39. 39. Forces you to make those links really work
  40. 40. Prototypes can be tested
  41. 41. Prototypes can be tested
  42. 42. Prototyping is your secret superpower!
  43. 43. From how to what: • Identify the gaps • Match components • Prototype risky things
  44. 44. & we care about this Why?
  45. 45. User experience is the result of all the small interactions combinedSmall tweaks to reduce complexity, smoothen the flow do pay off.
  46. 46. The UI == The app Frontend provides the user interface. Make it as user friendly as possible.
  47. 47. Thank you See you at the code sprint tomorrow?
  48. 48. Start where you are Use what you got Do what you can

Notas do Editor

  • Assumption:
    this is for frontenders who feel that they want to do more than just executing on wireframes and designs that are likely not complete
    I want to frame the process, then look at what you can do now as a frontender
    and then look at steps you can take to get involved earlier so that you can help shape the acutal project
  • First some context
    And then the other 3 will make sense as well
  • Begin with high level overview of user experience design. This is not a role but a process that many people and teams work through
    There are many models. This one is easy to understand
  • Its called the DD
    Trigger: idea
    Discover: why do something with it?
    Define: what to do
    Design: explore possible solutions
    Develop: build the actua lthing
  • Start with why
  • Voila, the double diamond for designing digital products and services
  • This is the main takeaway.
  • So yeah, UX designers have their own versions of scope creep.
  • Because its all about the clc of course
    from reach to acquiring to…
  • And we follow the customer on their cross channel journey of using a product or service.
    Everytime the customer interacts with some part of the service, that happens at a touch point
  • At each of these touch points a certain scenario is available:
    searching for hotels in gent
    book the hotel online
    check in at the hotel
    enter your hotel room
    check out, etc.
  • For digital, these scenarios usually mean that the user works through screens.
  • All is well so far. We're orchestrating the touch points, the scenarios are in place
    But, if we don't watch out, it can be a very small detail that throws people off
    And never book that hotel room
  • There are famous examples of a single form element can have tremendous impact on conversion
  • Just a single checkbox right?
    This is about Firefox, which had some checkboxes in preferences that could basically render the browser useless.
  • The point is: design is in the details
  • So now we arrive at the feel part
    Anyone know or read this book?
    It provides a super useful model for making sure all the tiny interactions do the right thing and make sense when combined
    This is about single interactions. Not a complete feature, but a single element of interactoin within a given feature
    This is of course about form design for a big part. You work with forms right?
  • Lets have a look.
    This is the breakdown
  • Multiple items of feedback here:
    – greyed out text
    0 higihlighted step
    – progress bar
    – text labels
    all together a bit much maybe
  • Example of a long loop: the main button gradually gets smaller over time.
  • A mode is a fork in the rules.
    Example: shift key. Changes the behaviour of all other keys.
    Settings screens are another basic example
  • So microaction. Doe er uw voordeel mee!
  • Very visible
  • The goes underground
    Stuff happens
  • Becomes available for frontenders.
    Hope is you will make it look exactly like what we saw in the concept right?
  • Static deliverables are static