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...
Excise
Excise are those extra moves that aren’t goal-directed but
still needed; extra work

Goal: get to work (by car)

Ex...
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, ...
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 bett...
Aim #2

Place most important
functionalities


Deadline entries share
“apply” functionality and “deadline” information

Fu...
What could
be improved
Generally tables are so-so

Organize dates in compacter way:
21 Feb 2013 - 24 Feb 2013





21 - 24...
Exercise – let’s fix this!
Groups of 2-3

-  Identify important
information, functions
-  Sketch on paper, Excel,
Photoshop...
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 belongin...
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 sha...
Gestalt principles

Uniform connectedness

Connectedness is stronger grouping principle than proximity,
color, size or sha...
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 ...
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...
Further thinking
We love tables. They are overused. How to resolve their
functionality in a better designed way?
Upcoming SlideShare
Loading in...5
×

Interface Design workshop

204

Published on

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

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
204
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Interface Design workshop

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

    Clipping is a handy way to collect important slides you want to go back to later.

×