Interface Design workshop
Upcoming SlideShare
Loading in...5
×
 

Interface Design workshop

on

  • 234 views

Slides from the Interface Design workshop, held in Rotterdam, February 2013. ...

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

Statistics

Views

Total Views
234
Slideshare-icon Views on SlideShare
183
Embed Views
51

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 51

http://localhost 29
http://peterkun.com 22

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Interface Design workshop Interface Design workshop Presentation Transcript

    • Interface Design Excise, direct manipulation Information design Gestalt principles Grouping
    • 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.
    • 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...
    • Excise Main aim: eliminate excise
    • Direct manipulation This is what we love!
    • Excise in practice Cut back from tedious steps Use AJAX magic on frontend, have as many steps done on the same page
    • Excise in practice Remove useless data (why the heck do I need to read this? – cognitive load)
    • Case study – information design Internal Events vs Training Calls box    
    • 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!
    • The data model may trigger what information pieces to show/not to the users
    • Aim #2 Place most important functionalities Direct manipulation! This should be obvious Novel is not necessarily better.
    • Aim #2 Place most important functionalities Deadline entries share “apply” functionality and “deadline” information Functionality: excise Affordance: icon
    • 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.)
    • 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.
    • Gestalt principles A kind of theory of perception and visual language
    • Gestalt principles Proximity Things close to each other perceived belonging together.
    • Gestalt principles Similarity /contrast-sense/ Among many similar object, a differentiated one is perceived not belonging.
    • Gestalt principles Similarity /contrast-sense/ Among many similar object, a differentiated one is perceived not belonging.
    • Gestalt principles Similarity Organizing power of color, shape, placement, size
    • Gestalt principles Similarity Organizing power of color, shape
    • Gestalt principles Uniform connectedness Connectedness is stronger grouping principle than proximity, color, size or shape.
    • Gestalt principles Uniform connectedness Connectedness is stronger grouping principle than proximity, color, size or shape.
    • Gestalt principles Continuity Perception completes breaks in continuity
    • Gestalt principles Continuity
    • Visual indicators Playing with size, colors, placement My sketching from DM Graz for 3rd level navigation Sketching for thinking, trial and error
    • Grouping
    • Grouping
    • Grouping
    • Grouping – are you sure?
    • Grouping - exercise Suggested method: Sketch on paper or Photoshop Prototype with Firebug or parade Also fix: dates, odd/even alternation, aligns
    • Further thinking We love tables. They are overused. How to resolve their functionality in a better designed way?