Designing and building Windowed interface for Web applications

for Web Applications
Steve Smith
Hi, I’m


@orderedlist
Windowed Interface?
What is a
Advantages
•
Important interface elements are always in
sight and available
•
Allows for independent scrolling of various
content sections
•
Feels more like a desktop application
•
Lends itself to more natural AJAX integration
Concerns
•
Less room for content areas because of
persistent navigation or header
•
Requires fluidity in your layout
•
More difficult to replicate the interaction of a
desktop application
Windowed Interface
How to design a

Common Elements
Identify
Keep it Simple
Remember to
Remember to Think Thin
•
Thin doesn’t mean small
•
Take only the space necessary for each element
•
The fewer items you need to show, the more
breathing room you can give them, which
increases usability
•
Maximize the clickable area on any visually
small elements
Window Flexibility
Prepare for
Cursor Styles
Think about
vs.
Arrow Cursor Pointer Cursor

Fight!!!
Use the arrow pointer everywhere
except on standard text links.
Suggestion:
Why alter the default behavior?
•
No other application except browsers use the
pointer cursor
•
The arrow cursor feels more precise
•
Often the click behavior only alters the current
page, not loading a new one
•
Don’t rely on the pointer cursor to indicate if
an element is clickable
Consistency
Notes about