Tag Archives: ui

CSS Browser Reset

A trendy topic amongst CSS’ers is the CSS reset. The idea is that you intercept the default browser stylesheet (that is used first in the cascade), reset, and then apply generic styles including margin/padding. I read many articles by many gurus, but I eventually came out with what I have below.

For differing implementations check out this great “killer collection” of resets, and note that this won’t work in IE6 due to the universal selector but I’m ok with that.

/*

Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.

By: Chris Poteet & various influences

*/

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
29 Replies

Economical Usability Testing

Usability testing is often overlooked to the peril of both the developer and the consumer. I was convicted reading Steve Krug’s book on usability to go ahead with testing even if it’s small and cheap. In doing this for the recent design of this site I wanted to share how I did usability testing for all of $60.

Feedback Form

The first thing I did was create a form in Wufoo, a powerful form building application, to receive feedback. I made it simple and short (I had to keep it to 10 fields in the free version). I made an announcement on my personal blog offering a small gift certificate to Amazon for the most in-depth results. I got so many good ones that I decided to give out 4 $10 gift certificates instead of the two I mentioned in the blog post. I got some great feedback from age groups varying from teenager to baby-boomer, male and female, and different income families. I even had a scale from very technical to a casual user of the Internet. Here are some of the comments I received (a sample of the results).

What is your impression of the home page, and where do you want to go first?

  • “It’s bright and I am having some trouble with the lack of contrast…”
  • “The home page makes a strong impression. The design itself is simple, but effective.”
  • “I went first to services to see if you could back up the claims in the home page text, then to portfolio to check out your abilities.”
  • “It’s very green. Probably too green. In the least I would reverse the greens…”

Is the text easy to read?

  • “Too small.…I like bigger type and bolder.”
  • “The white text in the menu with the dark green background is difficult to read.”
  • “Change the text size in the browser window, and it skews things…”

Final Comments

  • “The terminology is confusing because I am an accountant and not a web programmer.”
  • “When searching, I wasn’t sure if it would search page content and articles, or only articles.”
  • “Possibly adding a snippet of the page in the search results (rather than just a link to the page) would make it more helpful.”
  • “I don’t like how when I’m looking at more pages of articles, I’m still at the home page. It seems like when I click on “Next” it should open up to something bigger.”

Video Taped Usability Session

I also paid $20 to have someone sit down and answer questions related to the site. It came from a site called User Testing.com. I appreciated the results, and I thought I would share the results with you. You can also gauge the differences between the old and new versions.

Instead of embedding the media, please view the usability test results in a new window.

Changes Made 

It doesn’t mean much unless I actually make changes as a result of this effort. Here are some changes I made in response.

  • Removed the pagination on the front page to take the user to an archives page.
  • Swapped the greens to make the softer one more prominent.
  • Add excerpts to the search/archives page to describe article content.
  • Made clear on the search page what was actually search (both articles and pages).
  • Explained what the “*” meant on the contact page (which I mistakenly thought was not needed).
  • Changed the overflow on the main page to scroll when text size was increased so as to not throw off the layout.
  • Changed the terminology from “Goodies” to “Downloads”.
  • Changed the color on input forms from a light gray to black for more contrast.
  • Removed confusing “blog categories” drop down from pages.
  • Removed technical jargon from the “Services” page, and trimmed the “About” page (and I still need to do more).

Conclusion

After going through this process I was grateful for the feedback I received, and I’m happy with the changes I made. I didn’t have to make every suggested change, and I filtered that by whether I felt the user fit into the demographic of people who would visit my site.

It is gratifying to make an appliacation this is usable, and it’s much easier to receive the constructive criticism from real users and not an executive telling me what my users want. I would highly suggest that a similar approach be taken early and often in the development to ensure that your users are satisfied with their experience.

Leave a reply

Objectives in User Interface Design

At work we are currently re-doing the architecture of our user interface (UI) layer. We sat down to discuss what our objectives should be in doing this initiative, and I found the objectives so compelling that I think it could apply to any user interface. Below are the major objectives in constructing a UI: consistency, usability, navigation, visual appeal, interoperability, performance, and accessibility.

I should first say that this list and its corresponding description are not intended to be exhaustive. I realize that there are many layers of complexity 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 Levels of Architecture

Before I get into each of these points I want to talk about the two levels of architecture that are involved in the UI layer. The first is the information architecture (IA) of UI. Here is a great definition for IA.

“Information architecture is the design of the structure and navigation of an interactive product: software, a web-based application or a web site. An effective information architecture assessment bridges the gap between research and analysis and the visual design of your interactive product…The intent of an information architecture assessment and strategy is to properly define effective, goal-oriented interaction between your users and your application or web site.”

The second layer is the technical architecture. Technical architecture is basically how we choose to implement our information architecture programmatically. This would be decisions such as: what is our stylesheet architecture? How much abstraction do we want in our implementation? In summary, it would be how we design our presentation, structure, and behavior layers (what Jeffrey Zeldman called the “Trinity of Web Design”).

Consistency

If I were to say that there was a foundation to others it would be consistency. Without consistency such things as usability, navigation, etc. couldn’t exist. Consistency applies to every aspect of the user interface. Some things to keep in mind when thinking about this:

  • Does the layout of our application stay the same with minimal aberrations?
  • Is the navigation clear and consistent, or is every click a gamble?
  • Do even small details such as the link color/behavior stay the same throughout?

Usability

Usability is the endeavor that is often skipped during development due to resources, which is a shame, because many errors could be discovered earlier. Usability brings the application to the people that will actually use it. How many requirements meetings have you been in that revolve around your end users? Most of the time, whether intentional or not, we tend to project our personal preferences onto this mythical “iUser” that doesn’t exist. If your application is not usable then guess what? No one’s going to use it.

  • Have you brought in a sample of your demographic to test the application?
  • Does your application adhere to common “best practices”?
  • Have you read Steve Krug’s Don’t Make Me Think?

Navigation

Navigation is to an application as table of contents 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, navigation should answer the question: Where Am I? I see this as being the aspect that we tend to have the tendency of projecting our preferences onto a design. Navigation should also encompass the taxonomy you have for your site so I know the content of your site.

  • What are sites that you find easy/hard to navigate, and do you consider that when designing?
  • Does your navigation truly serve the purpose of navigation?
  • Is your navigation hidden, or is it prominent, clear, and usable?

Visual Appeal

The fact that we want to design something that is in fact visually appealing is not a bad desire to have. The only problem is when we design interfaces for visual appeal at the expense of the others on this list. We also need to separate the thought that visual appeal corresponds to filling 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 Bigger Cream”.

  • Have you ensured that your desire for visual appeal hasn’t come at the expense of usability, accessibility, etc.?
  • Does your site look good without all the fluff? In a syndication world we need to make sure that our content stays the primary focus.
  • Does your site contain stock photos? If so, abandon quickly.

Interoperability

Web standards have, at their core, a focus on increasing interoperability. Wouldn’t it be nice that if we followed a standard that regardless of browser our design would look the same, and regardless of device our content will be delivered? Sometimes it is appropriate to design for a specific demographic, but most of need to consider at least the major players in the browser/OS market. I should never again see a “this page is best viewed in…” message again.

  • Does my application perform well in various environments including the presentation and behavior?
  • Are you using hacks to target certain browsers? Well, then stop it.
  • Is my content tied to my interface, or does my interface allow syndication?

Performance

Remember the good olé’ days of dial-up? Ya, I’d rather not remember that either. We live in a broadband world now, but we still have to be conscientious that our application doesn’t make us cook dinner while we wait for it to load. Standards-based design helps in this regard. With cleaner, semantic markup and abstracting the presentation from the structure we reduce the performance concern?

  • Does your markup look beautiful?
  • Does your content perform well in a non-desktop environment (i.e. mobile)?
  • Are you using tools like YSlow to find performance bottlenecks?

Accessibility

Accessibility usually all had to be pushed from a social responsibility perspective (which many managers outside of the government could care less about) until we could start masking it under the guise that Google’s spider was the #1 blind web user. The truth is that accessibility is important, and even CSS 2.1 added markup to help with screen readers. Remember that you don’t want to alienate anyone from viewing your content. And yes, it’s true that accessibility does help your SEO if you need another reason to sell it.

  • Have you considered the accessibility standards such as Section 508 and/or the Web Accessibility Initiative (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 encourage the user to increase/decrease the font?

Conclusion

Developing user interfaces is a complex process that deserves a lot of foresight and ability to adapt to your users, industry trends, and changing technologies. If you keep these considerations in mind you will be well on your way to creating an application that is usable, flexible, scalable, and so much more!

2 Replies