wireframing web apps
Post on 28-Jan-2015
114 Views
Preview:
DESCRIPTION
TRANSCRIPT
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/
top related