Top Banner
Designing Complex Interfaces Bojhan Somers
59

Complexinterfaces

Nov 18, 2014

Download

Business

Bojhan

Approaches to designing complex interfaces.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Complexinterfaces

Designing Complex InterfacesBojhan Somers

Page 2: Complexinterfaces

Hello!

Bojhan

Page 3: Complexinterfaces

Why Complex?

Complexity = Capability

Page 4: Complexinterfaces

Why Complex?

“Understanding what users really need”

Page 5: Complexinterfaces

Why Complex?

“If everything is important, nothing is”

Page 6: Complexinterfaces

Usability an after thought

Page 7: Complexinterfaces

Understanding User Goals

• Talking to users• Observing users

Page 8: Complexinterfaces

ToolsInform design

Page 9: Complexinterfaces

Concepts &

Relationships

Page 10: Complexinterfaces

Concepts & Relationships

• Understanding the “what”• Working on the invisible

Page 11: Complexinterfaces

Concepts & Relationships

• Data object types• Functional Elements

Page 12: Complexinterfaces

Views2 Concept map Roy Scholten (yoroy)

Page 13: Complexinterfaces

Software vs

User leading

Page 14: Complexinterfaces

Software vs User leading

• Interface for Neurosurgeons • Interface for doing taxes

Page 15: Complexinterfaces

Software Leads

User Leads

Page 16: Complexinterfaces

But…

Page 17: Complexinterfaces

Bulk Rename aplication

Page 18: Complexinterfaces

Flexible

• Drupal’s code is really flexibleBut..• Is Drupal’s interface really flexible?

Page 19: Complexinterfaces

Screen States

Page 20: Complexinterfaces

Screen States

• Blank• Regular• Error• Flooded

Page 21: Complexinterfaces

Blank

Page 22: Complexinterfaces

Blank

Page 23: Complexinterfaces

Blank

Page 24: Complexinterfaces

Regular

Page 25: Complexinterfaces

Error

Page 26: Complexinterfaces

Flooded

“What happends if you have 20.000 nodes?”

Page 27: Complexinterfaces

Flooded

Page 28: Complexinterfaces

Flooded

Page 29: Complexinterfaces

Tools

• Concepts & Relationships• Software vs User leading• Screen states

Page 30: Complexinterfaces

Views 2

Page 31: Complexinterfaces

Views2

Page 32: Complexinterfaces

Walkah’s eye-tracking

Page 33: Complexinterfaces

Real eye-tracking

Page 34: Complexinterfaces

Concepts & Relationschips

Page 35: Complexinterfaces

Concepts & Relationschips

Page 36: Complexinterfaces

Software vs User leading

Views2

Page 37: Complexinterfaces

Blank state

Page 38: Complexinterfaces

Regular state

Page 39: Complexinterfaces

Flooded state

Page 40: Complexinterfaces

Views 2

• Could use some work still• Lower the barrier

Page 41: Complexinterfaces

Principles

Page 42: Complexinterfaces

Designing the invisible

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

Page 43: Complexinterfaces

Fail often

• Set time a side to experiment• Don’t code to much• Indepth feedback

Page 44: Complexinterfaces

Design communication

• Design your documents• Open source

– Deliverable not the intresting part– No is good, hmm is bad

Page 45: Complexinterfaces

Set a vision

• Clear vision amongst team

Page 46: Complexinterfaces

Form Builder

Page 47: Complexinterfaces

Content types interface

Page 48: Complexinterfaces

Fields

Article Article

TitleTaxonomy

Body

Drupal 7 Title

Taxonomy

Body

Page 49: Complexinterfaces

Drupal 7 interface

Page 50: Complexinterfaces

Form builder

Page 51: Complexinterfaces

Moving fields around

Page 52: Complexinterfaces

Field Element

Page 53: Complexinterfaces

Why is it good?

• Maps closer to the mental model

Page 54: Complexinterfaces

Why is it good?

• Reusable pattrens

Page 55: Complexinterfaces

Why is it good?

Proven interaction

Page 56: Complexinterfaces

Why is it good?

Flexible components

Page 57: Complexinterfaces

Designing complex interfaces

• Tools• Principles

Page 58: Complexinterfaces

Let’s work on this!

• UX – Sprint tomorrow• D7UX.org• Drupalusability.org

Page 59: Complexinterfaces

Thanks!bojhan.nl