Interface Design workshop
0 likes688 views
The document discusses interface design principles, including the importance of direct manipulation and minimizing extraneous steps (referred to as excise) in user interactions. It emphasizes the application of gestalt principles in organizing information effectively, particularly in displaying crucial data to users. Additionally, it highlights the need for effective grouping and visual clarity in design to improve user experience.
Interface Design workshop
- 1. Interface Design Excise, direct manipulation Information design Gestalt principles Grouping
- 2. Excise a tax levied on certain goods and commodities produced or sold within a country and on licenses granted for certain activities: excise taxes on cigarettes.
- 3. Excise Excise are those extra moves that aren’t goal-directed but still needed; extra work Goal: get to work (by car) Excise: opening garage door, driving out of garage, closing garage, filling up gas...
- 4. Excise Main aim: eliminate excise
- 5. Direct manipulation This is what we love!
- 6. Excise in practice Cut back from tedious steps Use AJAX magic on frontend, have as many steps done on the same page
- 7. Excise in practice Remove useless data (why the heck do I need to read this? – cognitive load)
- 8. Case study – information design Internal Events vs Training Calls box
- 9. Aim the number of #1 Maximize available information. Identify the most important information(s) the users want to know, need to know. 1, People need to know Where it is (easily GO/NOGO for many locations) What it is (usually LBG trainings, but if fundraising, I'd never apply) When is it (easily GO/NOGO if I'm unavailable). 2, People wish to know Who else has applied (and very important for TiGro for overview) Excise!
- 10. The data model may trigger what information pieces to show/not to the users
- 11. Aim #2 Place most important functionalities Direct manipulation! This should be obvious Novel is not necessarily better.
- 12. Aim #2 Place most important functionalities Deadline entries share “apply” functionality and “deadline” information Functionality: excise Affordance: icon
- 13. What could be improved Generally tables are so-so Organize dates in compacter way: 21 Feb 2013 - 24 Feb 2013 21 - 24 Feb 2013 Links in the odd/even blue rows are not that distinct Icon after "See detailed list" has 3px offset (margin-bottom: -3px), but: I'm only checking in Chrome in Firebug -> cross-browser checking is p.a.i.n.)
- 14. Exercise – let’s fix this! Groups of 2-3 - Identify important information, functions - Sketch on paper, Excel, Photoshop/Paint - Fake with Firebug, take screenshots - Play with size, placement, colors Gradual steps! Let’s ignore (UX) considerations such as making it attractive for internationally non-involved to apply for events.
- 15. Gestalt principles A kind of theory of perception and visual language
- 16. Gestalt principles Proximity Things close to each other perceived belonging together.
- 17. Gestalt principles Similarity /contrast-sense/ Among many similar object, a differentiated one is perceived not belonging.
- 18. Gestalt principles Similarity /contrast-sense/ Among many similar object, a differentiated one is perceived not belonging.
- 19. Gestalt principles Similarity Organizing power of color, shape, placement, size
- 20. Gestalt principles Similarity Organizing power of color, shape
- 21. Gestalt principles Uniform connectedness Connectedness is stronger grouping principle than proximity, color, size or shape.
- 22. Gestalt principles Uniform connectedness Connectedness is stronger grouping principle than proximity, color, size or shape.
- 23. Gestalt principles Continuity Perception completes breaks in continuity
- 25. Visual indicators Playing with size, colors, placement My sketching from DM Graz for 3rd level navigation Sketching for thinking, trial and error
- 26. Grouping
- 27. Grouping
- 28. Grouping
- 29. Grouping – are you sure?
- 30. Grouping - exercise Suggested method: Sketch on paper or Photoshop Prototype with Firebug or parade Also fix: dates, odd/even alternation, aligns
- 31. Further thinking We love tables. They are overused. How to resolve their functionality in a better designed way?