In which we look at the mysteries of moving from boxes and arrows to a real actual interface. It starts with sketching, goes through basic models of interaction on a screen, and finishes with wireframes.
Use Wizards:• When users want to • The audience is not technically accomplish a goal that has savvy and is likely to be many steps. Wizards are good confused by a page with a lot at making sure you don’t miss of choices on it. A Web site a step. can have novice users, and a• When the steps must be wizard makes complex tasks completed in order. Wizards seem easy. are linear, so it’s impossible to • Bandwidth is low and complete them any other way. downloading a single big page• When the task is seldom could take forever, or the tasks performed. Wizards can seem require several server calls, slow and plodding, so they are which would also slow the best used in tasks you do only page’s load. once in a while, like setting up • The task has several steps in it, a printer. performed only once a visit, such as checkout.
When designing the page, groupitems by similarity and similarity oftask (navigation items together,editing items together)Give them visual importance basedon user number, usage frequencyand importance to business.
• Create “zones” for functionality groups.• You can group them by putting white space around them, or use lines• Remember to keep tools close to the thing your working on
Consider• Where does the content come from? If you have a list of related articles, specify how they’re related. Are they the most viewed? Most viewed from that section?• What is the nature of the content? Does it vary greatly in length, size, language,and type?• Is the element required or optional? What happens if the element doesn’t appear on that page? Does the layout change?• Is the element conditional? Does it vary based on other factors? For example, do administrators see additional links? What happens if an article doesn’t have an associated image? What if it does?• What’s the default or expected state? Ideally, what’s supposed to happen on the page.• What are the alternate or error states? How does the design change when things don’t go right?
Homework• Pick a website to sketch out• Pick a Website to Zone• Try a page form your project