newsletter

December 07 ABCs of Web Design Newsletter

If you would like to opt-out of this newsletter, please send an email to theresaw@columbus.rr.com.

Introductory comments

I started a new job and I am working on the largest web site I have ever worked on. Wow this thing is huge and quite a challenge. On to the question:

Comments about W-edge design web site:

"Looking for information and found it at this great site."

"Interesting information... Keep it up. Excellent site."

"Wonderful and informative web site. I used information from this site -- it's great."

"I have been looking for sites like this for a long time. Thank you!"

Question of the month

Question: I had a comment/question submitted to me via my newsletter registration form. It asked me to list the strategies I use when designing. Since I design both applications and web sites, I thought I would talk about designing applications this month and web sites next month since both are different. In all honesty, I do not use any “strategy” when designing -- each site and application is different because the users’ goals are different. if I use any “strategy” it is to fully understand the users’ goals and tasks. And once you understand that information, you start designing wireframes to represent the screens.

Answer: Here are some of the strategies I use to design web applications (I am doing one at my current job).

Easy to use

Both applications and web sites need to be easy to use. Characteristics of a user-friendly interface are:

• Self evident
• Deducible
• Consistent in appearance and behavior
• Matches user expectations
• Efficient VIMM-based design principles

Four focal points of design:

1. Navigation – Can users find it? Navigation correlates to Intellectual load.
2. Content – Is it what users want? Content correlates to memory load.
3. Presentation – is it easy to understand? Presentation correlates to visual load.
4. Interaction – can users act on it? Interaction correlates to Motor load.

Effective Navigation for Applications

When users go through your application, they answer these questions:

• Where am I?
• Where can I go?
• How do I get there?
• How do I get back?

Effective navigation:

• Shows logical default state of the application
• Primary tasks are prominent
• Supports frequency of use
• Helps get tasks completed
• Matches the user’s mental model
• Follows user task flow
• Maintains context of where you are in the application
• Is flexible

Application Navigation Structures:

• Hierarchical drill-down (hub)
• Persistent menus (random)
• Sequential (step-by-step)
• Search
• Hybrid (combination)

Application screen types

Once you know the user’s tasks, pick a screen type that supports a specific task. Users expect that common tasks will appear in familiar screen types. Most applications can be supported by 8-10 screen types.

The primary window is the first window launched in an application. This is the main task space of the application. The principle tasks are presented prominently.

The secondary window is a window launched within the primary window. There may be more than one secondary window open at a time. They appear smaller than the primary window. They can be model (require user to complete interaction with this window before continuing) or modeless (allows the user to interact with either window). These can be message boxes, process dialogs or tool-tips.

Application screen types:

• Account (read-only form)
• Task panel with central object
• Data manipulation
• Notebook
• Wizard
• Search and result list
• List and display
• Graphic drill-down
• Create, review, update delete (CRUD)

Application screen elements are a subset or portion of a screen type optimized to perform a specific task. Screen elements are named according to the user’s task and fond on primary or secondary screens. Screen elements are:

• Navigation bar
• Menus
• Toolbars
• Toolbox
• Status bar
• CRUD
• Table
• Panels

Recent Clients of W-edge design:

Cabella Creations
Columbus Polarity
Compton Creative
Damesbond
DigitalEve Columbus
Healing Environments with Feng Shui
Moonhorse Art Studio
Ohio Institute of Energetic Studies and Bodywork

Wrap up

The new job I started is awesome. I am going to completely redesign their web application and I get to redesign their web site too! Thanks for reading my newsletter.

Please send all questions to theresaw@columbus.rr.com.

To see the articles from my print web column, go to http://www.w-edge.com/articles.htm

Feel free to forward this email in its entirety to anyone you feel might be interested in it.