down to the wire

content strategy and wire framing


Ashley Williams, NYCDA

Tuesday, 12 March 2013

content-first



The purpose of a website is to connect the right user to the right content at the right time


-Jeffrey Zeldman   

why?

If you don't make the content easy to find, users will find other ways to get it

  • RSS readers (Instapaper, Readability, Google Reader, Flipboard, longreads)
  • Aggregator websites (Tumblr, Buzzfeed)
  • Your competitors

What does easy mean?

The three click rule:


If the user cannot reach the content in three clicks the website is content-averse

SCrew that


As long as a user is able to determine that they are making progress towards their goal, a user will continue to click, even past three clicks

Progress - use cases

  • Users visit websites to achieve goals
  • These goals are called use cases
  • "Just looking around" is rarely a goal, and a bad use-case to design for
  • One should design for the most lucrative use-cases that represent the business goals of the company

Progress - audience


  • Use cases belong to audiences
  • Sometimes these audiences are well described by a representative personality described in a persona
  • A persona will describe a faux person, their attributes, and most importantly their goals
  • "EVERYONE" is NOT an audience
  • The more specific you can be about your audience and their motivations the better you can design your use cases and the better you can design your product

A great read on users, user types, and their motivations:

great reads

progress - elements

  • Breadcrumbs
  • a:visited states
  • Personalization
  • Progress bars

how to find out what works


Read some user research:

Do usability testing:
  • Guerilla or "hallway" testing: Go to a public place and observe members of the public attempting to achieve a goal using your product
  • A/B testing: Present users with 1 of 2 designs and ask them to accomplish a  goal. Compare and contrast  user success using each of the two designs.

the design process


There are many different workflows that a web design and dev team can use. Some examples:

  • sketch > wireframe > visual code
  • sketch > wireframe > hi-def wireframe > visual > code
  • wireframe > hi-def wireframe > visual > code
  • sketch > code
  • wireframe > interactive prototype > visual > code

what do these things mean?


  • Sketch: quickly get out ideas and general visual layout
  • Wireframe: Visual layout with content distribution
  • Hi-Def Wireframe: A more specific wireframe with more granular details
  • Visual: A colored in wireframe with fonts, borders, images, and other branding elements included
  • Interactive prototype: Anything from a simple keynote presentation to simple HTML, CSS, and JS. Can be bare bones, or contain some branding elements.
  • Code: HTML, CSS, JS

Some opinions


  • Visual mockups: full of lies... Photoshop files are static (not responsive). People are likely to get attached to visual mockups and be more resistant to change. Needless to say: Biz Dev types LOVE these things.
  • Wireframes: Keep them simple and semantic. Should translate to code very easily. Programs like Balsamiq let you make wireframes that are exportable to HTML.
  • Interactive Prototypes: By far the best, but also the most time consuming. The code used to make these is often thrown out, but the early design and product decisions can be made with a real exp of the interaction in mind.

wireframing


  • Wireframing is a method used to create visual web app layouts that focus on content and NOT style


Wireframes DO NOT have:
  • images
  • color
  • fonts
  • borders

wireframes

What do wireframes have?
  • Boxes
  • Headings
  • Filler text (lorem ipsum)
  • HTML element names

How do i make wireframes?

  • Paper!
  • Balsamiq
  • Illustrator
  • online editors


A good article about how to choose a tool:

Neat resources


Grids

  • When wireframing, you want to start with a grid
  • The words grid and layout are often interchanged, though the word grid refers specifically to how the layout relates to the window
  • A grid allows you to standardize the width of your elements and the spaces between them

There are two types of grid:
  • fluid- changes with the width of the browser window, uses percentages, responsive (+1)
  • static- does not change based on the width of the browser window, uses static numbers, not considered responsive

grids


Twitter bootstrap offers two examples of these grids.

Check them out here:
Twitter Bootstrap - Scaffolding: Grid Systems

Viewports

  • Fluid layouts require something called "viewports"
  • Viewports describe the width of the screen of the device currently accessing the website
  • Fluid layouts are associated with style sheets that use @media queries to change the grid depending on specific viewport sizes called "breakpoints"
  • It is impossible to create a breakpoint for every screen, so breakpoints are usually benchmark widths that generalize the diversity of viewport widths
  • NOTE: when considering mobile devices the viewport can be either the width of the height of the screen depending on device orientation (!!)

oy vey?

  • Building responsive grids is hard! And it takes a while.
  • More importantly: a lot of people have already made really nice ones.
  • We are going to use Twitter Bootstrap.

If you'd like to learn more, check out this set of notes by LukeW: http://www.lukew.com/ff/entry.asp?1683

Exercise

  • Think about how you might design a personal branding site for yourself
  • Determine an audience, write a simple persona for them, and come up with 3 use cases
  • Download the Illustrator Grid file for Twitter Bootstrap: http://checkthis.com/6i6g
  • Create a wireframe for your page for yourself (check out about.me for inspiration)
  • Label the boxes you create with the content they should contain AS WELL AS the html element tag you would use to describe that content
  • Keep the idea of progress in mind, reward your user with feedback
  • If you need help, use wirify to inspect websites
Made with Slides.com