Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Semelhante a Less look, more feel
Semelhante a Less look, more feel (20)
Mais de Roy Scholten
Mais de Roy Scholten (14)
Último
Último (20)
Less look, more feel
- 1. Less look, More feel @royscholten Frontend United Gent, 2016
- 4. A process model for UX design
- 6. Customer personas, mental models, Market trends, competitors Product elevator pitch, high-level feature set
- 7. Concept visual, cust. journeys, scenarios Experience design principles, metrics Content key messages, content
- 8. Visual sketching, style tiles Interaction wireframes, flows, prototypes Content content model, sitemap
- 13. Why, What, How
- 14. Why, What, How ☜ you are here
- 15. Improve the How
- 26. Trigger
- 27. 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
- 28. Rules
- 29. 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
- 30. Feedback
- 31. 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?
- 32. Loop
- 34. Mode
- 35. 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
- 41. Create your own checklist So you can do a design intake: what's there, what's missing?
- 42. Improve the how: • micro-interactions • create checklists
- 43. yes, But
- 44. Most decisions have already been made Why & What have already been decided on
- 49. Why, What ☜ how to get to here? How
- 50. Moving from How to What
- 52. Share that checklist with project manager and designer! Show don't tell: what is missing?
- 53. Suggest multiple ways to fill the gaps Quick & dirty: 4 hrs / Quality: 16 hrs Enable the team to make considered trade-offs
- 56. Start from the content model Different content types Their relations Ways they can be displayed
- 63. Easier to understand, resulting in better feedback
- 64. Responsive!
- 65. Easy to share. People can use it on their own device
- 66. Forces the use of real content
- 67. Forces you to make those links really work
- 73. From how to what: • Identify the gaps • Match components • Prototype risky things
- 74. & we care about this Why?
- 75. User experience is the result of all the small interactions combinedSmall tweaks to reduce complexity, smoothen the flow do pay off.
- 76. The UI == The app Frontend provides the user interface. Make it as user friendly as possible.
- 77. Thank you See you at the code sprint tomorrow?
- 79. 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 Plan 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