iPhoneiPodTouchDev

Monday, June 4, 2012

Storyboarding

Storyboarding is about tasks.
It's not about pretty pictures, but rather about communicating ideas. Visually communicating ideas.
Storyboarding should illustrate a goal.

Storyboarding Objectives:
Setting

Actors/People involved
Environment
Task being accomplished

Sequence

What steps are involved?
What leads someone to use the app?
What task is being illustrated?

Satisfaction

What motivates people to use this system? (cost, efficiency, ease of use)
What does it enable people to accomplish?
What need does the system fill? (distribution of information)

Storyboards help people get on the same page.
Make the time to make a storyboard short. (e.g. 10 minutes max)

-- Scott Klemmer

Sunday, May 27, 2012

UI

Guts from HERE.

The underlying data structures should not define the UI. UI should not define underlying data structures.
Good UI can use a transform to convert data structure into appropriate UI data.
Make the next step obvious.
Need must proceed Technology.
Postpone platform choice until you know what you need to build. Start with real use cases. Think in flows, not in features.
People must experience the UI in order to form an opinion about it. (Cannot just look at screenshots)
Prototype often (and abandon prototypes often). Schedule prototypes for delivery in a sprint. It's an evaluation tool. Build them fast. Build quickly, checkout quickly and dispose of prototypes without regrets.
Make prototypes simple (so they don't take long to do) and can be evaluated quickly.
Simplify. Reduce the number of perceived things. Reduce visual clutter. (Cognitive load increases with each element on the screen.)
User interface perception:

negative shape and aesthetics (Emotional) - user identifies what is unpleasing and pleasing. user already has an idea if they will like it or not before they even use it.
element parsing and counting (workload)
use first element first (execute)

Keep error messages in context. (see how the error messages are in close proximity to the field of entry)

In touch interfaces, denote scrollable areas by clipping content.
Leverage muscle memory and be consistent. (consistent layout even within sections)
Think outside the page load. If you can do stuff in-place then do it. (minimize context shifts) Pagination by detecting scroll movement.
Use transitions to change states.
Iterate and refine.
Find out what users like and dislike. (Have surveys, talk to users, build into application)
Never break the user experience.
Provide customer with a great experience. (Don't shut get the darned product shipped.)

Engineering UI: (ugly, blocks you from having a positive emotional item, lots of workload-may seem like a lot, ton of work for user, causes page abandonment)

Redesign of same page: same fields, broken into multiple steps, element parsing and counting (workload) is much lighter than previous. Notice how the field labels are light grey inside the field instead of a separate label.