Day 2: Web Application Foundations
January 22, 2007
The leaders in web application design share their best practices and principles. We've chosen each session to give you the essentials for making a successful web application. You'll come away with a full stock of tips and techniques you'll want to share with your entire team.
8:30am—9:45am
Summit Keynote: Moving Towards Delight: Following the Rapid Evolution of Web-Based Applications
It's clear that web-based applications are now going to be a key component of every organization's quest for the ultimate customer experience. The web app's power, flexibility, and innovative qualities only keeps expanding, making it an essential tool for any experience designer.
Today's web-based applications go beyond what previous technologies and organizational processes could ever accomplish. Organizations can provide better customer support than ever, giving customers up-to-the-minute information on everything happening on their account. Ad-hoc teams can collaborate and innovate from all over the globe. Customers can customize mass-produced products and services to meet their specific needs.
In this presentation, Jared will walk us through the evolutionary path of the web-based application, predicting where it's taking us by closely studying where it's been. It'll prove to be a wonderful, fascinating journey you won't want to miss.
10:00am—11:15am
Design Patterns and Principles
With the advent of Ajax and the resurgence of Flash, new patterns of interaction have emerged on the Web. In this presentation, Bill Scott, an expert design evangelist at Yahoo!, provides insight on how to best take advantage of the power of rich technology for product design through a series of best practices, summarized as seven key principles. Each principle and its nuances are illustrated in detail with real world patterns and counter-examples from both inside and outside Yahoo!
Project Web App: Building an Application From Scratch
Hagan Rivers, Two Rivers Consulting
How do you go from a requirements document or feature list to a full- fledged application? You have to begin by understanding the structure of your application and then turning that into a design.
For many designers, it can be tough to figure out where to start. Hagan Rivers, a premier web application designer, has personally gone through this process for over 70 products and along the way she's learned a lot about what does and doesn't work. During this presentation, Hagan will:
- Start with a product features and requirements document for a web application
- Provide tips on where to start your design work
- Design the application's stage (the user's work area) and create the key screens in the application
- Create a structure diagram that identifies core elements of the product
- Put all of these elements together and create a design that helps the user to complete his tasks.
The presentation will provide you with useful, ready-to-use ideas and examples that will help you to design a web app with confidence.
11:30pm—1:00pm
Lunch: Come network with our Summit speakers and attendees.
1:00pm—2:15pm
Communicating Concepts with Comics
Many teams try to use requirements documents, personas, user scenarios, and storyboards to help understand how people will use a feature or integrate a design into their life. However, these tools often yield unsatisfactory and suboptimal results. They suffer from being ignored after their creation, interpreted differently by everyone who uses them, and focus on the interface instead of the user's actual experience.
At Yahoo!, Kevin has been experimenting with using comics as a technique for communicating the core concepts behind a design's intended user experience. In this presentation, he'll share how this technique has worked well to get teams informed and on the same page, without fixating on interface details too early in the project. He'll demonstrate an in-depth walkthrough of his process and the advantages he's found using comics over other methods.
He'll also demonstrate how you can do this technique, even if you are not an artist and feel you can't draw. He'll also demonstrate how he uses a simple Flash viewer to create a portable, distributable version which makes it easy for remote stakeholders to participate.
A Process-Based Approach to Creating Innovative Applications
Larry Constantine, Constantine and Lockwood
Designers are frequently challenged to create innovative applications without sacrificing user performance or ease of learning. Staying within the boundaries of ordinary designs seldom leads to extraordinary breakthroughs, while novelty unattached to real needs usually fails in the long run. The most successful innovation is pragmatic, with unconventional designs that are firmly anchored in carefully articulated understanding of user objectives and real-world constraints. Through the right combination of both novel and established techniques, user interfaces can be made both extraordinary in their support of user performance and immediately accessible to first-time users.
In this presentation, Larry Constantine, an expert designer, looks at how processes and methods can facilitate or hinder successful design innovation. It will examine how the choice of models and modeling techniques can highlight opportunities for effective innovation and how premature commitment to concrete design elements can mean missed opportunities for novel solutions. The pluses and minuses of non-standard user interfaces will be considered, including the potential role of intellectual property in sustaining design leadership.
2:30pm—3:45pm
Web Application Structure: Where Am I? How Did I Get Here?
Hagan Rivers, Two Rivers Consulting
One of the most important decisions you will make in the design of any web application is the navigation and orientation elements. The navigation elements are the ones that help users get around. The orientation elements are the ones that help users understand where they are within your application.
There are a lot of choices: should you have tabs? menus? Expanding lists? How do you indicate the current sub-page? When should you use breadcrumbs? Each of these choices can have a big effect on your application's design, but sometimes it's difficult to figure out what to do.
Drawing from years of experience in making just these kinds of choices Hagan will:
- Choose one web application and discuss its structure.
- Show that application with different navigation systems, such as tabs, menus, and links. We'll look at how the structure is converted into a navigation design.
- Show several different orientation mechanisms for the same application, such as bread crumbs, windowing, and titles.
- Why you might favor one navigation and orientation system over another.
Hagan will show practical examples that you can immediately put to work on any web application design.
Best Practices for Form Design: Bridging the Gap with Your Customers
Luke Wroblewski, Yahoo!
In the world of Web applications, forms bridge the gap between people, their information, and your product or service. From registration forms that welcome new customers to checkout forms that finalize e-commerce transactions, Web forms frequently broker crucial online interactions.
In this session, Luke will walk you through the considerations and best practices of Web form design culled from international usability testing, eye-tracking studies, and over ten years of designing Web applications. He’ll outline how the interaction and visual design of Web forms can make the difference between acquiring a customer and completing a transaction or not.
After you learn about how different types of forms, input fields, input labels, calls to action, and surrounding visual elements can support or impair different aspects of user behavior, you’ll never look at your Web forms the same way again.
4:00pm—5:15pm
A Web Accessibility Primer
We have a decade's worth of guidance on how to make Web documents accessible. But good information on the development of accessible Web apps is still hard to come by. Moreover, the line between Web content and Web app these days is only getting harder to draw.
This session will cover the what, how and why-me of making Web applications accessible to users with disabilities. Areas covered will include the range of assistive technologies in use today (not just screen readers); content and programmatic accessibility issues in Web apps; and how to work with Ajax now and in the future.
Web Application Page Hierarchy
Luke Wroblewski, Yahoo!
When a potential customer makes it to one of your Web application’s pages, what will they do? Do you want them to sign up, contribute their knowledge, make a purchase, dive deeper into your content? Clearly, these are decisions you don’t want to leave up to chance.
In this session, Luke will outline the way people naturally scan Web pages and explain how you can guide users through key content and actions using visual hierarchy to construct meaningful, prioritized page layouts. You’ll be taken through several before and after examples with explanations of how a page’s content was prioritized, why, and how that priority is being communicated to users so they don’t need to rely on chance to use your Web application.
Register
by January 16th for only $1,999—a savings
of more than $400 off the final walk-in registration price. Register
now!