form still follows function

interface design — why form still does follow function and evolve into more.

Transcript

1. interface design
3. form follows function bauhaus
4. 1. focus on making interaction easy, intuitive & accessible to all 2. consistency for all: UI elements, language and design 3. user testing for true results ~ the client is not the user 4. give feedback at all times 5. prepare for mistakes consider your users ... everything else is secondary ...
5. form follows function consider all users & their purpose UI language and visual style to fit purpose & audience visual elements → easily recognised & understood interaction / feedback → obvious & clear keep it simple consider accessibility from the start
6. form follows function physical sensory cognitive logical structure of UI elements accessible via keyboard and switches provide alternatives for all media accessible via keyboard and screenreaders use both visual references and text offer alternative routes or functions consider all abilities during planning and design to establish an all inclusive UI
7. form follows function proximity similarity Prägnanz symmetry closure Gestalt principles of form perception ‣ elements in close vicinity to each other seen as group ‣ similar elements grouped via commonalities (shape/line/colour) ‣ element recognised by succinct simplicity of shape/line ‣ recognition of elements around a symmetrical axis ‣ recognition of shape via outer elements
8. form follows function proximity ‣ elements in close vicinity to each other seen as group
9. form follows function similarity ‣ similar elements grouped via commonalities (shape/line/colour)
10. form follows function proximity ‣ elements in close vicinity to each other seen as group
12. form follows function Prägnanz ‣ element recognised by succinct simplicity of shape/line
13. form follows function Prägnanz ‣ element recognised by succinct simplicity of shape/line
14. form follows function Closure ‣ recognition of shape via outer elements
15. form follows function know your users ease of use considered language & visual style common user patterns & behaviour clear communication with users simplify for usability & accessibility cater for different abilities interface design
16. form follows function case study: ‘!inding work’ - sites/services FUNCTION TARGET GROUP LOCATION STRUCTURE ‣ enable users to !ind work/employment + job search ‣ general to speci!ic !ield ‣ UK ‣ labelled job sections
17. case: craigslist UK URL: london.craigslist.co.uk
18. case: craigslist UK URL: london.craigslist.co.uk/
19. case: craigslist UK URL: london.craigslist.co.uk/
20. case: total jobs URL: totaljobs.com
21. case: total jobs URL: totaljobs.com
22. case: total jobs URL: totaljobs.com
23. case: authentic jobs UK URL: uk.authenticjobs.com
24. case: authentic jobs UK URL: uk.authenticjobs.com
25. case: authentic jobs UK URL: uk.authenticjobs.com
26. case: Bread URL: breadapp.com
27. case: Bread URL: breadapp.com
28. case: Bread URL: breadapp.com
29. case: WorkFu URL: workfu.com
30. case: WorkFu URL: workfu.com
31. case: WorkFu URL: workfu.com
32. interface design design for people =
33. image credits: • photo: milk & sugar dispenser, World Design Capital Helsinki 2012, via gimmebar.com • ‘conversation’ illustration by Roxanne Daner, yoursroxanne.com • illustrations of disabilities by Prisca Schmarsow, originally created for INMD (www.inclusivenewmedia.org) • windows logos © Microso"t • Mac finder icon © Apple • Forrst logo © Forrst (forrst.com) • head illustration via Frank Chimero on Gimmebar site references • Workfu - workfu.com • Craigslist UK - london.craigslist.co.uk • Total Jobs - totaljobs.com • Authentic Jobs, UK - uk.authenticjobs.com • Bread - breadapp.com
34. Prisca Schmarsow prisca@eyedea.eu graphiceyedea.co.uk @prisca_eyedea