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

1. Interface Design
Excise, direct manipulation
Information design
Gestalt principles
Grouping

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. 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. Excise
Main aim: eliminate excise

5. Direct manipulation
This is what we love!

6. Excise in practice
Cut back from tedious steps
Use AJAX magic on frontend, have as many steps done
on the same page

7. Excise in practice
Remove useless data
(why the heck do I need to read this? – cognitive load)

8. Case study – information design
Internal Events vs Training Calls box

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. The data model may trigger what information pieces to show/not to the users

11. Aim #2
Place most important
functionalities
Direct manipulation!
This should be
obvious
Novel is not
necessarily better.

12. Aim #2
Place most important
functionalities
Deadline entries share
“apply” functionality and “deadline” information
Functionality:
excise
Affordance:
icon

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. 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. Gestalt principles
A kind of theory of perception and visual language

16. Gestalt principles
Proximity
Things close to each other perceived belonging together.

17. Gestalt principles
Similarity /contrast-sense/
Among many similar object, a differentiated one is
perceived not belonging.

18. Gestalt principles
Similarity /contrast-sense/
Among many similar object, a differentiated one is
perceived not belonging.

19. Gestalt principles
Similarity
Organizing power of color, shape, placement, size

20. Gestalt principles
Similarity
Organizing power of color, shape

21. Gestalt principles
Uniform connectedness
Connectedness is stronger grouping principle than proximity,
color, size or shape.

22. Gestalt principles
Uniform connectedness
Connectedness is stronger grouping principle than proximity,
color, size or shape.

23. Gestalt principles
Continuity
Perception completes breaks in continuity

24. Gestalt principles
Continuity

25. Visual indicators
Playing with size, colors, placement
My sketching from DM Graz for 3rd level navigation
Sketching for thinking, trial and error

26. Grouping

27. Grouping

28. Grouping

29. Grouping – are you sure?

30. Grouping - exercise
Suggested method:
Sketch on paper or Photoshop
Prototype with Firebug or parade
Also fix: dates, odd/even alternation, aligns

31. Further thinking
We love tables. They are overused. How to resolve their
functionality in a better designed way?