Approaches to designing complex interfaces.

1. Designing Complex Interfaces
Bojhan Somers

2. Hello!
Bojhan

3. Why Complex?
Complexity = Capability

4. Why Complex?
“Understanding what users really need”

5. Why Complex?
“If everything is important, nothing is”

6. Usability an after thought

7. Understanding User Goals
• Talking to users
• Observing users

8. Tools
Inform design

9. Concepts
&
Relationships

10. Concepts & Relationships
• Understanding the “what”
• Working on the invisible

11. Concepts & Relationships
• Data object types
• Functional Elements

12. Views2 Concept map
Roy Scholten (yoroy)

13. Software
vs
User leading

14. Software vs User leading
• Interface for Neurosurgeons
• Interface for doing taxes

15. User Leads
Software Leads

16. But…

17. Bulk Rename aplication

18. Flexible
• Drupal’s code is really flexible
But..
• Is Drupal’s interface really flexible?

19. Screen States

20. Screen States
• Blank
• Regular
• Error
• Flooded

21. Blank

22. Blank

23. Blank

24. Regular

25. Error

26. Flooded
“What happends if you have 20.000 nodes?”

27. Flooded

28. Flooded

29. Tools
• Concepts & Relationships
• Software vs User leading
• Screen states

30. Views 2

31. Views2

32. Walkah’s eye-tracking

33. Real eye-tracking

34. Concepts & Relationschips

35. Concepts & Relationschips

36. Software vs User leading
Views2

37. Blank state

38. Regular state

39. Flooded state

40. Views 2
• Could use some work still
• Lower the barrier

41. Principles

42. Designing the invisible
“The beter the design, the more invisble it
becomes” – Jared M. Spool

43. Fail often
• Set time a side to experiment
• Don’t code to much
• Indepth feedback

44. Design communication
• Design your documents
• Open source
– Deliverable not the intresting part
– No is good, hmm is bad

45. Set a vision
• Clear vision amongst team

46. Form Builder

47. Content types interface

48. Fields
Article Article
Drupal 7
Title Title
Taxonomy
Body
Taxonomy
Body

49. Drupal 7 interface

50. Form builder

51. Moving fields around

52. Field Element

53. Why is it good?
• Maps closer to the mental model

54. Why is it good?
• Reusable pattrens

55. Why is it good?
Proven interaction

56. Why is it good?
Flexible components

57. Designing complex interfaces
• Tools
• Principles

58. Let’s work on this!
• UX – Sprint tomorrow
• D7UX.org
• Drupalusability.org

59. Thanks!
bojhan@bojhan.nl