Simplification[edit]

Basic principles of IT[edit]

• Stucture versus chaos?
• adhoc versus prepared!

Structures[edit]

• Lists
• Tables
• Trees
• Graphs

UI Representation of Structures[edit]

Basic principles of IT[edit]

• Stucture versus chaos?
• adhoc versus prepared!

Structures[edit]

• Lists
• Tables
• Trees
• Graphs

UI Representation of Structures[edit]

Lists[edit]

• http://ui-patterns.com/users/1/collections/lists/screenshots

Tables[edit]

• http://www.noupe.com/design/data-tables-in-modern-web-design.html

Data visualization[edit]

• http://www.awwwards.com/charts-and-graphs-data-visualization-in-web-design.html

Graph visualization[edit]

• http://neo4j.com/developer/guide-data-visualization/
• http://homepages.cwi.nl/~ivan/AboutMe/Publications/StarGraphVisuInInfoVis.pdf

Simplification: local view only show the neighbours and not more ...

Simplification[edit]

• https://en.wikipedia.org/wiki/Principle_of_least_astonishment
• http://www.comm.rwth-aachen.de/files/on_complexity_reduction_of_user_interfaces_for_safety-critical_systems_1.pdf

UI Elements[edit]

• Button
• Link
• Menu
• Tabs
• Forms/Fields
• Pictures

Interaction concepts[edit]

• Clicking/Touching
• Whiping/Scrolling/Moving
• Selecting from a list (e.g. Radiobutton, List, Dropdown)
• Direct manipulation (e.g. drag and drop)
• Typing (?) (supported e.g. by Quick

• http://de.slideshare.net/KMcGrane/from-typing-to-swiping-a-brief-history-of-interaction-design
• https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/interaction-styles

Lists[edit]

• Todo
• To buy
• Participants
• ...

Tables[edit]

• Organisations
• Persons
• Invoices
• Cost Overview
• ...

Trees[edit]

• Filesystem
• Organisation/Person/Contact

Graphs[edit]

• Links in Wiki
• UML

Mapping Structures and interaction concepts[edit]

1. e.g. isA relation (inheritance)
2. e.g. 1:1 relation
3. e.g. 1:N relation
4. e.g. N:M relation

Structure definition and handling[edit]

• Table design?
• GUI e.g. modelling tool?

Webdesign[edit]

e.g. https://www.interaction-design.org/courses