wireframing web apps

Wireframing

Web Apps

Friday, 16 October 2009Intros

Philosophy

not Process

Friday, 16 October 2009

Based on a day workshop, condensed into 15 minutes!Intend to get over principles and approaches.

Discovery Ideation Prototyping Usability

Friday, 16 October 2009

Not set in stone, but we have seen these four stages emerge during our working practice

Discovery Ideation Prototyping Usability

Friday, 16 October 2009

(We’re going to be working on the Ideation/Prototyping phase) but what would happen prior to that?

Discovery Ideation Prototyping Usability

CardsortingPersonadevelopment

UserjourneysSitemapping

Competitoranalysis

Contentaudit

Ethnographicresearch

Contextualenquiry

Friday, 16 October 2009

Some may be covered in planning this afternoon

Discovery Ideation Prototyping Usability

DIVERGE

CONVERGEDIVERGE

CONVERGE

Friday, 16 October 2009

Diverge to converge

Discovery Ideation Prototyping Usability

costofchange

no.ofalternatives

Friday, 16 October 2009

Paper

Interactive

Ideation Prototyping

✓✓✓✓

Friday, 16 October 2009

Breakdown of today. 2 mediums each with 2 uses.

The joy of paper

Friday, 16 October 2009

The joy of papersketch

Friday, 16 October 2009

“A process for innovation and creativity through iterations”

Bill Moggridge

Friday, 16 October 2009

Definition of sketching. Iterations. Central to the notion of divergent design.

sketchingismostusefulduringideation

Paper

Interactive

Ideation Prototyping

✓✓✓✓

Friday, 16 October 2009

Largely pen & paper but as we will demonstrate can be interactive as well

• Minimal, relevant detail

• Appropriate degree of refinement

• Suggest & explore, don’t confirm

• Ambiguous

Sketching outcomes

Friday, 16 October 2009

The outcomes of which are these.

Minimal, relevant detail: you only need to tackle those elements you’re sketching to resolve (grey box or outline everything else, crossed images, scribbles for copy etc.)

Appropriate refinement: too much detail confuses the purpose.

Ambiguity, open-endings, question marks are absolutely fine. Sketches should ask questions and have holes in which the answers can expand (Buxton’s Swiss cheese analogy).

• Rapid

• Timely, convenient

• Cheap

• Disposable

• Plentiful

• Clear vocabulary

Sketch attributes

Friday, 16 October 2009

Timely, convenient: You can do this now with very little, if any, preparation.

Disposable: essential for iterative (refinement). No loss.

Plentiful: Many routes can be discussed.

Clear vocab: the intent is clear. A sketch is typically unfinished which tells people (like clients) that this is work in progress. That they still have the opportunity to change, to feedback.

Contrast this to the polished screen design which implies you have finished, does not invite ideas. By implication you are saying I don’t want or even value your ideas.

Nobody will confuse the sketch with the final product (and ship it!)

Examples

Friday, 16 October 2009

(communication, collaboration, think while you sketch)

Friday, 16 October 2009

Friday, 16 October 2009

Friday, 16 October 2009

Friday, 16 October 2009

Friday, 16 October 2009

Friday, 16 October 2009

Too precise

Design patterns are your friend

&anti-patterns

Friday, 16 October 2009

http://developer.yahoo.com/ypatterns/

Friday, 16 October 2009

http://designinginterfaces.com/

Friday, 16 October 2009

http://www.designingsocialinterfaces.com/

Friday, 16 October 2009

Bill Scott:Mind Mapping Design Patternshttp://bit.ly/12jl3X

Friday, 16 October 2009

Paper

Interactive

Ideation Prototyping

✓✓✓✓

Friday, 16 October 2009

Discovery Ideation Prototyping Usability

DIVERGE

DIVERGE

Friday, 16 October 2009

• Do lots! Diverge don’t converge

• Sketch as you talk & think

• Forget aesthetics (this is the wrong place for that)

• Collaborate. Don’t be afraid to scrawl on your colleague’s sketches.

Sketching tips

Friday, 16 October 2009

Paper

Interactive

Ideation Prototyping

✓✓✓✓

Friday, 16 October 2009

Friday, 16 October 2009

Paper prototyping is DRAWING whole pagesrather than sketching elements or patterns

Friday, 16 October 2009

Friday, 16 October 2009

Going Interactive

Friday, 16 October 2009

Design in the browser. Native medium. Clickable. High fidelity.

“It has to be realised that experience is very badly

understood by observation: the designer has to take part.

Nothing is easier than believing we understand experiences

we’ve never had.”Matt Webb

schulzeandwebb.com/blog/2007/09/09/the-experience-stack-revisited/

Friday, 16 October 2009

“You can’t tell how well something will work

until it’s sitting there in your sweaty palm.”

Tom Humetomhume.org/2006/02/interaction_des.html

Friday, 16 October 2009

“Wireframing AJAX is a bitch.”Jeffrey Zeldman

http://alistapart.com/articles/web3point0

Friday, 16 October 2009

Paper

Interactive

Ideation Prototyping

✓✓✓✓

Friday, 16 October 2009

“All the engineers need is a picture and a conversation.”

Josh Damon Williams http://bit.ly/12XiNl

Friday, 16 October 2009

Friday, 16 October 2009

Friday, 16 October 2009

Friday, 16 October 2009

Friday, 16 October 2009

Pearson

Friday, 16 October 2009

Paper

Interactive

Ideation Prototyping

✓✓✓✓

Friday, 16 October 2009

ElfCartel super best friends web

© 2008 · · · ·

Search Go

Home People Groups

Me in a nutshell

Olenit iuscing consequis facinci dolut, ros irilla psustrud. Stincil

lacus inciduipit mollis magniamet, dolortisl consenisim aliquisi

diamet ver illa quipsum illaor illam. Put veros dunt curae gait,

veriusto accum patin. Conullandiam blamet pede, issectem

dionsenit illam ridiculus acipisl lute, suscipit doloboreet

coreraestrud.

Tellus tat lacinia, commodipis nulput veliquat volor venit enim,

fermentum eugiat nummy. Accumsandre si sustrud, tisi vulluptatum

ullaor eu, praesed euisl acilit sequat. Aliquip aute nostrud, lobor

dolor nim vulputat, non curae bla etuerostrud. Nonsenibh endreet

veros alisi dipiscipit, niscidu dolent sagittis. Aliquis nonulla acipsus.

More about me

Friends

Groups

Amidactio's profile

friend status

super best friend

good friend

mere acquaintance

never met

admin

Add to friends

Interests

My favourite music

My favourite films

My favourite books and authors

Screen name

Adactio

b0xman

Clagnut

Oriental prince in a land

of soup

Group name

Currysoc

We love Pie!

Clearleft Ltd About Help Legal Contact

Profile photo with thanks & apologies to Jeremy Keith

Friday, 16 October 2009

Elf Cartel: http://elfcartel.clearleft.com/profile.php?slide=simpleajax

Make a fave / remove as fave toggleStar rating widget - incredibly difficult to describe in words but easy to show. Would have taken a while to build, but lifted from our production library so it's just plug and play.

Fairly simple as the change to the is occuring where the initiating action (mouse click) took place so that’s where the user’s attention currently is, although we’re not wireframing a ‘waiting’ state.

More examples:Edenbee - cancelling notices, adding a flight

PolyPagehttp://github.com/andykent/polypage/

<ahref="logout"class="pp_logged_in">Signout</a>

<ahref="login"class="pp_not_logged_in">Login</a>

Friday, 16 October 2009

PolyPage is a JQuery plugin for showing different views on the page. Just uses class names.

Paper

Interactive

Ideation Prototyping

✓✓✓✓

Friday, 16 October 2009

Diverge to Converge – DO IDEATION!

Use paper for rapid iterations but don’t be afraid to move to to the browser when paper reaches its limitations. Interactive for behaviour.

Don’t be intimated by code. It’s not as hard as you think.

Interactive for usability testing.

Remember all this as a design tool as much as a communication tool.

You need the conversation to turn them in to conversation tools.

Thanks!rich@clearleft.com

http://clearleft.com/does/teach/prototyping/

Friday, 16 October 2009

Our day long workshop is at http://clearleft.com/does/teach/prototyping/