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


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



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


CardsortingPersonadevelopment

UserjourneysSitemapping

Competitoranalysis

Contentaudit

Ethnographicresearch

Contextualenquiry


Some may be covered in planning this afternoon


DIVERGE

CONVERGEDIVERGE

CONVERGE


Diverge to converge


costofchange

no.ofalternatives


Paper

Interactive

Ideation Prototyping

✓✓✓✓


Breakdown of today. 2 mediums each with 2 uses.

The joy of paper


The joy of papersketch


“A process for innovation and creativity through iterations”

Bill Moggridge


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

sketchingismostusefulduringideation

Paper

Interactive


✓✓✓✓


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


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


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


(communication, collaboration, think while you sketch)


Too precise

Design patterns are your friend

&anti-patterns


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


http://designinginterfaces.com/


http://www.designingsocialinterfaces.com/


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


Paper

Interactive


✓✓✓✓



DIVERGE

DIVERGE


• 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


Paper

Interactive


✓✓✓✓



Paper prototyping is DRAWING whole pagesrather than sketching elements or patterns

Going Interactive


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/


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

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

“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


“Wireframing AJAX is a bitch.”Jeffrey Zeldman

http://alistapart.com/articles/web3point0


http://www.alistapart.com/articles/web3point0

http://www.alistapart.com/articles/web3point0

Paper

Interactive


✓✓✓✓


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

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


http://bit.ly/12XiNl

http://bit.ly/12XiNl

Pearson


Paper

Interactive


✓✓✓✓


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


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>


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

http://code.new-bamboo.co.uk/polypage/








Paper

Interactive


✓✓✓✓


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.

[email protected]

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


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







wireframing web apps

Technology

paper prototyping

sketch attributesrapidtimely

joy of paper

denition of sketching

dont convergesketch

dont confirmambiguous

polished screen design

notion of divergent