Interface Design workshop
0 likes684 views
際際滷s from the Interface Design workshop, held in Rotterdam, February 2013. The participants were senior and junior IT developers and designers from BEST (Board of European Students of Technology - http://www.best.eu.org), hence the secret language and the very specific examples used (i.e. BEST's intranet - Private Area).
More Related Content
Viewers also liked (13)
Similar to Interface Design workshop (20)
Recently uploaded (20)
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 arent goal-directed but still needed; extra work Goal: get to work (by car) Excise: opening garage door, driving out of garage, closing garage, 鍖lling 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 lets 鍖x 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! Lets 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 鍖x: dates, odd/even alternation, aligns
- 31. Further thinking We love tables. They are overused. How to resolve their functionality in a better designed way?