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 #1 Maximize the number of 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?