Slide 1

Slide 1 text

interface design

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

form follows function bauhaus

Slide 4

Slide 4 text

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 ...

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

form follows function proximity ‣ elements in close vicinity to each other seen as group

Slide 9

Slide 9 text

form follows function similarity ‣ similar elements grouped via commonalities (shape/line/colour)

Slide 10

Slide 10 text

form follows function proximity ‣ elements in close vicinity to each other seen as group

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

form follows function Prägnanz ‣ element recognised by succinct simplicity of shape/line

Slide 13

Slide 13 text

form follows function Prägnanz ‣ element recognised by succinct simplicity of shape/line

Slide 14

Slide 14 text

form follows function Closure ‣ recognition of shape via outer elements

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

case: craigslist UK URL: london.craigslist.co.uk

Slide 18

Slide 18 text

case: craigslist UK URL: london.craigslist.co.uk/

Slide 19

Slide 19 text

case: craigslist UK URL: london.craigslist.co.uk/

Slide 20

Slide 20 text

case: total jobs URL: totaljobs.com

Slide 21

Slide 21 text

case: total jobs URL: totaljobs.com

Slide 22

Slide 22 text

case: total jobs URL: totaljobs.com

Slide 23

Slide 23 text

case: authentic jobs UK URL: uk.authenticjobs.com

Slide 24

Slide 24 text

case: authentic jobs UK URL: uk.authenticjobs.com

Slide 25

Slide 25 text

case: authentic jobs UK URL: uk.authenticjobs.com

Slide 26

Slide 26 text

case: Bread URL: breadapp.com

Slide 27

Slide 27 text

case: Bread URL: breadapp.com

Slide 28

Slide 28 text

case: Bread URL: breadapp.com

Slide 29

Slide 29 text

case: WorkFu URL: workfu.com

Slide 30

Slide 30 text

case: WorkFu URL: workfu.com

Slide 31

Slide 31 text

case: WorkFu URL: workfu.com

Slide 32

Slide 32 text

interface design design for people =

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Prisca Schmarsow [email protected] graphiceyedea.co.uk @prisca_eyedea