Siolon

Objectives in User Interface Design

At work we are cur­rently re-doing the archi­tec­ture of our user inter­face (UI) layer. We sat down to dis­cuss what our objec­tives should be in doing this ini­tia­tive, and I found the objec­tives so com­pelling that I think it could apply to any user inter­face. Below are the major objec­tives in con­struct­ing a UI: con­sis­tency, usabil­ity, nav­i­ga­tion, visual appeal, inter­op­er­abil­ity, per­for­mance, and accessibility.

I should first say that this list and its cor­re­spond­ing descrip­tion are not intended to be exhaus­tive. I real­ize that there are many lay­ers of com­plex­ity in this endeavor. Also, you’ll see how inter-dependent they are on one another. If you do one poorly it shows up in the others.

Two Lev­els of Architecture

Before I get into each of these points I want to talk about the two lev­els of archi­tec­ture that are involved in the UI layer. The first is the infor­ma­tion archi­tec­ture (IA) of UI. Here is a great def­i­n­i­tion for IA.

“Infor­ma­tion archi­tec­ture is the design of the struc­ture and nav­i­ga­tion of an inter­ac­tive prod­uct: soft­ware, a web-based appli­ca­tion or a web site. An effec­tive infor­ma­tion archi­tec­ture assess­ment bridges the gap between research and analy­sis and the visual design of your inter­ac­tive product…The intent of an infor­ma­tion archi­tec­ture assess­ment and strat­egy is to prop­erly define effec­tive, goal-oriented inter­ac­tion between your users and your appli­ca­tion or web site.”

The sec­ond layer is the tech­ni­cal archi­tec­ture. Tech­ni­cal archi­tec­ture is basi­cally how we choose to imple­ment our infor­ma­tion archi­tec­ture pro­gram­mat­i­cally. This would be deci­sions such as: what is our stylesheet archi­tec­ture? How much abstrac­tion do we want in our imple­men­ta­tion? In sum­mary, it would be how we design our pre­sen­ta­tion, struc­ture, and behav­ior lay­ers (what Jef­frey Zeld­man called the “Trin­ity of Web Design”).

Con­sis­tency

If I were to say that there was a foun­da­tion to oth­ers it would be con­sis­tency. With­out con­sis­tency such things as usabil­ity, nav­i­ga­tion, etc. couldn’t exist. Con­sis­tency applies to every aspect of the user inter­face. Some things to keep in mind when think­ing about this:

• Does the lay­out of our appli­ca­tion stay the same with min­i­mal aberrations?
• Is the nav­i­ga­tion clear and con­sis­tent, or is every click a gamble?
• Do even small details such as the link color/behavior stay the same throughout?

Usabil­ity

Usabil­ity is the endeavor that is often skipped dur­ing devel­op­ment due to resources, which is a shame, because many errors could be dis­cov­ered ear­lier. Usabil­ity brings the appli­ca­tion to the peo­ple that will actu­ally use it. How many require­ments meet­ings have you been in that revolve around your end users? Most of the time, whether inten­tional or not, we tend to project our per­sonal pref­er­ences onto this myth­i­cal “iUser” that doesn’t exist. If your appli­ca­tion is not usable then guess what? No one’s going to use it.

• Have you brought in a sam­ple of your demo­graphic to test the application?
• Does your appli­ca­tion adhere to com­mon “best practices”?
• Have you read Steve Krug’s Don’t Make Me Think?

Nav­i­ga­tion

Nav­i­ga­tion is to an appli­ca­tion as table of con­tents are to a book. At a glance I should be able to know where I’m at, where I’ve been, and where I’m going. In other words, nav­i­ga­tion should answer the ques­tion: Where Am I? I see this as being the aspect that we tend to have the ten­dency of pro­ject­ing our pref­er­ences onto a design. Nav­i­ga­tion should also encom­pass the tax­on­omy you have for your site so I know the con­tent of your site.

• What are sites that you find easy/hard to nav­i­gate, and do you con­sider that when designing?
• Does your nav­i­ga­tion truly serve the pur­pose of navigation?
• Is your nav­i­ga­tion hid­den, or is it promi­nent, clear, and usable?

Visual Appeal

The fact that we want to design some­thing that is in fact visu­ally appeal­ing is not a bad desire to have. The only prob­lem is when we design inter­faces for visual appeal at the expense of the oth­ers on this list. We also need to sep­a­rate the thought that visual appeal cor­re­sponds to fill­ing the entire page. One of aspect of “Web 2.0 style” (yep, I said it) is a proper use of white space. Your design shouldn’t look like you applied some “Make My Logo Big­ger Cream”.

• Have you ensured that your desire for visual appeal hasn’t come at the expense of usabil­ity, acces­si­bil­ity, etc.?
• Does your site look good with­out all the fluff? In a syn­di­ca­tion world we need to make sure that our con­tent stays the pri­mary focus.
• Does your site con­tain stock pho­tos? If so, aban­don quickly.

Inter­op­er­abil­ity

Web stan­dards have, at their core, a focus on increas­ing inter­op­er­abil­ity. Wouldn’t it be nice that if we fol­lowed a stan­dard that regard­less of browser our design would look the same, and regard­less of device our con­tent will be deliv­ered? Some­times it is appro­pri­ate to design for a spe­cific demo­graphic, but most of need to con­sider at least the major play­ers in the browser/OS mar­ket. I should never again see a “this page is best viewed in…” mes­sage again.

• Does my appli­ca­tion per­form well in var­i­ous envi­ron­ments includ­ing the pre­sen­ta­tion and behavior?
• Are you using hacks to tar­get cer­tain browsers? Well, then stop it.
• Is my con­tent tied to my inter­face, or does my inter­face allow syndication?

Per­for­mance

Remem­ber the good olé’ days of dial-up? Ya, I’d rather not remem­ber that either. We live in a broad­band world now, but we still have to be con­sci­en­tious that our appli­ca­tion doesn’t make us cook din­ner while we wait for it to load. Standards-based design helps in this regard. With cleaner, seman­tic markup and abstract­ing the pre­sen­ta­tion from the struc­ture we reduce the per­for­mance concern?

• Does your markup look beautiful?
• Does your con­tent per­form well in a non-desktop envi­ron­ment (i.e. mobile)?
• Are you using tools like YSlow to find per­for­mance bottlenecks?

Acces­si­bil­ity

Acces­si­bil­ity usu­ally all had to be pushed from a social respon­si­bil­ity per­spec­tive (which many man­agers out­side of the gov­ern­ment could care less about) until we could start mask­ing it under the guise that Google’s spi­der was the #1 blind web user. The truth is that acces­si­bil­ity is impor­tant, and even CSS 2.1 added markup to help with screen read­ers. Remem­ber that you don’t want to alien­ate any­one from view­ing your con­tent. And yes, it’s true that acces­si­bil­ity does help your SEO if you need another rea­son to sell it.

• Have you con­sid­ered the acces­si­bil­ity stan­dards such as Sec­tion 508 and/or the Web Acces­si­bil­ity Ini­tia­tive (WAI)?
• Have you tried to browse your site with a screen reader?
• Do you lock in the font sizes, or do you allow and even encour­age the user to increase/decrease the font?

Con­clu­sion

Devel­op­ing user inter­faces is a com­plex process that deserves a lot of fore­sight and abil­ity to adapt to your users, indus­try trends, and chang­ing tech­nolo­gies. If you keep these con­sid­er­a­tions in mind you will be well on your way to cre­at­ing an appli­ca­tion that is usable, flex­i­ble, scal­able, and so much more!