Summer Web 2011

Prototyping UX Simplicity of Facts <SummerWeb /> ‘11

Cristi Bârlãădeanu, on 3rd of June 2011

User Experience

Cristi Bârlãădeanu, <SummerWeb /> ’11


“A person's perceptions and responses that result from the use or anticipated use of a product, system or service.”

ISO FDIS 9241-210:2009


Don’t jump to the solution before you understand the problem. If I had one hour to save the world, I would spend the first 55 minutes defining the problem.

Albert Einstein


Make things simple, intuitive, taking the context into consideration. Simplicity is powerful. Guide your users into taking simple decisions, keeping them away from distractions.


Acknowledge that the user is not (necessarily) like you. Engage beginners and attract experts. Designing for many people doesn‘t mean designing for the lowest common denominator.

Google User Experience Guidelines


Jesse James Garrett Co-founder of Adaptive Path Co-founder of Information Architecture Institute User Experience Designer Coined the term “AJAX” Authored The Elements of User Experience Design (diagram, book afterwards)


“Five planes” model of UX – 5S diagram


“Five planes” model of UX – 5S diagram Strategy Creator’s objective, Audience needs


“Five planes” model of UX – 5S diagram Strategy Creator’s objective, Audience needs Scope Specifications, Requirements, Briefs


“Five planes” model of UX – 5S diagram Strategy Creator’s objective, Audience needs Scope Specifications, Requirements, Briefs Structure Information Architecture, Interaction Design


“Five planes” model of UX – 5S diagram Strategy Creator’s objective, Audience needs Scope Specifications, Requirements, Briefs Structure Information Architecture, Interaction Design Skeleton Interface Design, Navigation Design


“Five planes” model of UX – 5S diagram Strategy Creator’s objective, Audience needs Scope Specifications, Requirements, Briefs Structure Information Architecture, Interaction Design Skeleton Interface Design, Navigation Design Surface Visual/ Sensory Design

Prototypes



“An original type, form, or instance serving as a basis or standard for later stages.”

American Heritage Dictionary

Why do we need them?



Text has limited expressivity when describing Human-Computer Interaction. UX does not originate from hundreds of pages of text.


Having extensive documents to describe your concept can easily cause people not seeing the wood for the trees. Consequences of needs and requirements are not realized.


Helping visualizing ideas in front of stakeholders from stage one avoids premature decision making. Enables considering alternative approaches to the problem.

How to prototype



Characteristics of a good prototype


Characteristics of a good prototype Fast Time to build is critical


Characteristics of a good prototype Fast Time to build is critical Focused Target essential aspects


Characteristics of a good prototype Fast Time to build is critical Focused Target essential aspects Disposable Be prepare to throw it away


Stages of prototyping Design, Communicate, Evaluate Iterate “Release early, release often.”

Agile development mantra


Common techniques Paper prototyping Business origami Wireframes Structure as primary HTML templates Basic user response Interactive prototypes High fidelity


Choose the fidelity wisely Visual Sketch – Styled Functional Static – Interactive Content Lorem ipsum – Real content


Keep your eyes on the ball. Any prototype should guide you through: Vision Sketch-based visioning Collaboration with sketch-boards Design/ Implementation drafts


“Double diamond” process model Discover Define Develop Deliver

Design Council, 2005

Questions?


Thank you!


[email protected] http://twitter.com/kristache http://facebook.com/cristi.barladeanu

Spiritual

Summer Web 2011