UPA2007 Designing Interfaces Jenifer Tidwell

Designing “Designing Interfaces:” How Not to Write a Pattern Catalog Jenifer Tidwell UPA 2007 Wednesday, June 13

Prologue: a little history ,[object Object],[object Object]

Developers designing UIs… ,[object Object],[object Object],[object Object],[object Object],[object Object]

Could patterns help? ,[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Wanted to apply knowledge from other fields

But was it useful? ,[object Object]

1999-2002: no work done ,[object Object],[object Object],[object Object]

[object Object],How Not to Write a Pattern Catalog: (Design it to be used)

1. Design it to be used ,[object Object]

1. Design it to be used ,[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

1. Design it to be used ,[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object]

[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

1. Design it to be used ,[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],How Not to Write a Pattern Catalog: (Design it to be used) (Focus on your users)

2. Focus on your users ,[object Object],[object Object],[object Object],[object Object]

2. Focus on your users ,[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Only MathWorks software.

[object Object],[object Object],[object Object],How Not to Write a Pattern Catalog: (Design it to be used) (Focus on your users) (Other forms can be better)

3. Other forms can be better When you’ve got a hammer…

3. Other forms can be better ,[object Object],[object Object],[object Object],[object Object],[object Object],My definition of “pattern:”

3. Other forms can be better ,[object Object],[object Object],[object Object],[object Object],[object Object]

3. Other forms can be better ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

3. Other forms can be better ,[object Object]

http://www.visual-literacy.org/periodic_table/periodic_table.html

3. Other forms can be better ,[object Object],[object Object],[object Object],[object Object],What had I done wrong?…

[object Object],[object Object],[object Object],[object Object],How Not to Write a Pattern Catalog: (Design it to be used) (Focus on your users) (Other forms can be better) (Think hard about use contexts)

4. Think hard about use contexts ,[object Object],[object Object],[object Object],[object Object]

Diversion: pattern writing ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],This is what gets you out of Obviousland.

Diversion: pattern writing ,[object Object]

Step 1: find a recurring element ,[object Object],[object Object],[object Object],[object Object],[object Object]

Step 2: walk the abstraction ladder ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Step 3: why does it work? ,[object Object],[object Object],[object Object],[object Object],[object Object]

Step 4: figure out use context ,[object Object]

Step 4: figure out use context ,[object Object],[object Object],[object Object],[object Object]

Step 5: name it ,[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],How Not to Write a Pattern Catalog: (Design it to be used) (Focus on your users) (Other forms can be better) (Think hard about use contexts) (Visual examples are critical)

5. Visual examples are critical ,[object Object]

5. Visual examples are critical ,[object Object],[object Object]

5. Visual examples are critical ,[object Object],[object Object],[object Object]

5. Visual examples are critical ,[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],How Not to Write a Pattern Catalog: (Design it to be used) (Focus on your users) (Other forms can be better) (Think hard about use contexts) (Visual examples are critical) (Find out how it’s really used)

6. Find out how it’s really used ,[object Object],[object Object]

6. Find out how it’s really used ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

6. Find out how it’s really used ,[object Object],[object Object],[object Object],[object Object],[object Object],The book says:

[object Object],What Users Do Organizing the Content Getting Around Organizing the Page Actions and Commands Showing Complex Data Getting Input from Users Builders and Editors Making it Look Good

[object Object],… but many respondents said “all” or “none.”

6. Find out how it’s really used ,[object Object],[object Object],[object Object],[object Object],[object Object],… yes, patterns are used in all these ways!

6. Find out how it’s really used ,[object Object],[object Object],Some other tidbits…

6. Find out how it’s really used ,[object Object],[object Object],[object Object],[object Object],[object Object],Frequently-named patterns:

6. Find out how it’s really used ,[object Object],[object Object],[object Object],Pattern names used:

6. Find out how it’s really used ,[object Object],[object Object],[object Object],[object Object]

6. Find out how it’s really used ,[object Object],[object Object],[object Object]

6. Find out how it’s really used ,[object Object],[object Object],[object Object],[object Object],[object Object],General comments…

6. Find out how it’s really used ,[object Object],Conclusions:

6. Find out how it’s really used ,[object Object],[object Object],Conclusions:

6. Find out how it’s really used ,[object Object],[object Object],[object Object],Conclusions:

6. Find out how it’s really used ,[object Object],[object Object],[object Object],[object Object],Conclusions:

UPA2007 Designing Interfaces Jenifer Tidwell

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Similar to UPA2007 Designing Interfaces Jenifer Tidwell

Similar to UPA2007 Designing Interfaces Jenifer Tidwell (20)

Recently uploaded

Recently uploaded (20)

UPA2007 Designing Interfaces Jenifer Tidwell