[2013-11-14] Workshop: Wireframing Tools and Techniques w/ Carolyn Chandler
What is a wireframe? - a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.
Capture ideas and sketch lo-fi interfaces. At this stage you are thinking about what features not whether or not we should have a radio button or a dropdown. The lo-fi interface is useful because people are more inclined to give honest feedback. They are less apprehensive to make comments about a prototype than they something that looks as though someone has put a lot of effort into polishing.
Do not go down the color and typography rabbit hole right at the start.
- Don't let "perfect" be the enemy of the GOOD.
- Don't let the "good enough" be the enemy of the GOOD (or the great).
- Strong foundations
- What do we need before we start developing?
- Common vocabulary
- How do we speak about experience design details?
- Valued checkpoints
- When does "good enough" become "good" or "great"?
- Owned by the WHOLE team, guided by the designers
Wireframes only communicate partial information to the developers.
- Communicate
- Develop a shared understanding of site layout and functionality
- Define page requirements
- Focus project team on critical elements
- Bring up questions the team hasn't thought of
- Explore user behavior and understanding (via usability testing - although prototypes are better)
- Remote
- Thinking (Visually)
- Streamline the process
What is a common pattern that frustrates people? Are we doing something that potentially makes someone feel stupid just to meet the requirement? (Ex: GMail asking if you want to send an e-mail with no attachment after you mention that attachment in the email.)
- Axure
- Balsamiq
- Pencil and Paper
- PowerPoint
- Keynote
- MockFlow
- PhotoShop
- Illustrator
- InDesign
- Visio
- OmniGraffle
- more...
Start with a low detail wireframe, and work your way through medium and high, testing all the way. You may not always make it to the high detail phase, if you are able to hand it off to your developers before hand.
Do not put real content in your Wireframes, because people tend to focus on the content then and not the design.
Wireframes help to communicate page layout, information priority, and content, and behavior relationships.
Wireframes do not communicate:
- Look and Feel
- Treatment of buttons and/or graphic elements
- Exact copy or verbiage
- Allows you to hone in on single elements or portion of the page without trying to understand that piece of the project within the context of the entire project.
- Tell the story of the user.
- Why is somebody trying to do this in the first place?
Engage the visual designer earlier in the process. Do not just hand them off a stack of wireframes. Work with them, so that they are not locked in to your layout choices, etc. You can use color for things like grouping, but try not to use too much. Being prescriptive doesn't provide the best solution.
Create content groupings of similar information types that are likely to be used together. This will help users when they are searching for information.
Consider chunks. The parts that need to be on every page (content, primary nav, utility nav, site logo, image, news, left nav, footer, etc). Add callouts and and annotations to these chunks about what you think might work for that chunk.
Don't forget that you can always be sketching as you are designing.
Good wireframes will achieve a balance between being too detailed and too vague.
- Business requirements
- Content requirements
- Existing brand and style requirements
- Technical requirements
- User insight (personas, mental models, usability testing, results, etc)
- Anti-personas someone who would be very vocal, but might not even be a user of your system.
How will users navigate around the site? Determine this early.
+What information should be included in a wireframe? Content, layout, behavior?_
Primary Stakeholders - How have our business goals been met? Developers - What do I have to support ad how does the site work? Visual Designers - What visual elements need to be displayed on the page? Copywriters - What do I need to write? Wireframe Creators - Why did I make these decisions?
- Elements
- Modules/Widgets
- Columnar Grid (960)
- Margins
- Padding
- Home page
- Secondary page templates (as many as needed)
- Unique pages (search or login)
- Process pages (registration or check out)