Chapter 1: Hubs and Interviews (PDF)

Are you starting to build complex web applications? Do you want to create a solid web app architecture? Do you know how to go from a feature list to a full-fledged application? Do you know when to choose between popular design elements, such as tabs, menus, links, and breadcrumbs, when creating your designs?

To help you tackle these design challenges, Hagan Rivers, a pioneer designer of web applications, has written a comprehensive, 54-page report that deconstructs some of today's most complex web applications. In this report, she'll walk you through the design techniques employed by Amazon.com, Microsoft Money, Yahoo! Mail, Shutterfly, and Blogger, among others.

Struggling to Build a Usable Web App?

When building a successful web application, it's essential for design teams to understand the structure behind the application. For many designers, it can be tough to figure out where to start. Hagan Rivers has personally designed more than 70 products and, along the way, she's learned a lot about what does and doesn't work.

In this all-inclusive report, Hagan gives you step-by-step guidance through the process of creating successful web applications. You'll learn:

• How to build your application's structure diagram. Hagan will explain how to use structure diagrams as shorthand for visualizing your designs. Structure diagrams help you communicate your application's structure with your team members and to help everyone focus on the key parts of the design.
• How to identify the two basic forms of application structure: Hubs and Interviews. The two most common structures found in web apps, Hubs and Interviews are essential components in your toolkit. You’ll get a comprehensive introduction to these two components, with several examples showing you when to use each type of structure.
• Which design elements to use. Hagan will show you where and when to use tabs, menus, breadcrumbs, links, and titles in your application. She’ll go over the strengths and drawbacks of each element.
• How to build your application's Command Architecture. When you design the organization of an application, you're building a command architecture, a hierarchy of hubs and interviews reflecting each command in your application. Hagan will show you how to build your architecture, step-by-step.

Dissecting a Real-World Web Application: The SupportSuite

Throughout the report, Hagan uses SupportSuite, an online help desk and support solutions website, as a real-world case study. You’ll deconstruct SupportSuite's design,  dissecting it to produce a structure diagram. You’ll identify SupportSuite's hubs and interviews and walk through the step-by-step process for building a structure diagram. Finally, you’ll add new structures to the architecture and see how they translate into a refined design, making the application simpler and easier to use, while maintaining all the same functionality.

Take it from an Expert

Hagan Rivers has worked non-stop pioneering design techniques for creating stylish and useful applications and remained on the cutting edge of application design technology. At the birth of the web, she worked the very first web-based interfaces. She led the design of Netscape 1.0 to 4.0, while simultaneously working on designs for Windows, Mac OS, and Motif.

Today, Hagan continues to push the envelope of web application design as a partner at Two Rivers Consulting. Her clients include both well-established and emerging companies, as well as non-profit organizations. Hagan is the expert everyone turns to when they need help with their hardest web application design projects, and you’ll get the benefit of her years of expertise when you read this report.

Did you know…

• An application can have multiple designs and underlying structures that accomplish the same goal. Design teams must weigh the advantages and disadvantages of each to see which most closely match the needs of their users.
  
• Menus can save you space, yet tabs make your hubs visible. Tab Menus give you the benefit of both tabs and menus, while breadcrumbs help communicate the relationship of different application components. Knowing which elements to choose is a critical design task.
  
• Creating structure diagrams is a quick and easy way to get all members of your design team on the same page when developing the structure of your design. You can save time, energy, and frustration by utilizing these handy illustrations. 
  
• Conducting field studies and usability tests are two of the best ways to get to know your users. Watch them in their natural environments performing various tasks or have them try out your previous designs to get a sense of how they will interact with your new product. 

Buy both reports in the Designer’s Guide to Web Applications

Jumpstart your web app design projects right away! Buy this report along with Hagan Rivers’ second report, Web Apps Tour 2007 for only $74!

100% Money Back Guarantee – Get Yours Today!

We guarantee you’ll be 100% satisfied. Buy your copy of The Designer's Guide to Web Applications, Part I: Structure and Flows and you have a full 30 days to look it over. If it’s not right for you, send us a mail message for a full money-back refund.

Get your copy today – it’s risk free.

Subscribe to UIEtips, our free email newsletter