Category Archives: web design

Innovating the User Experience on the Web

In the SpoolCast from UIE (User Interface Engineering) on October 7th, 2010, Jared Spool interviews Luke Wroblewski. In this SpoolCast, Jared and Luke discuss Google’s new instant search feature. While Luke was working with Yahoo, he had a chance to work with the same concept called “Live Search”. For Yahoo, this ultimately never made it to market.

The Google Instant has brings up the question if forms in general will begin to change due to these types of concepts. If you stop and think about it though, a lot of forms on the web offer this instant gratification. Sites such as Facebook and LinkedIn both offer a way for you to search that provides instant results.

Well that’s all great but what’s the catch?

Not everybody who implements these instant searches has the ability to take out the distracting results. For example, when you type something into the Google Instant, after the first letter is entered search results are returned, however, Google has no way of knowing what my entire search string is going to be. Google appears to use my recent and common searches and puts those at the top of the list. As Luke and Jared discuss though, not every company will have the resources to implement something quite this well.

Inline Processes

Another topic that Jared and Luke discuss is an in line approach to input. I know your probably thinking, input is already inline in a form, I don’t have to go somewhere else to fill out the form. But stop and think about that. Many times you actually DO have to go somewhere else to fill out a form. Luke brings up the example of Quora for a site that makes good use of inline input. On this site much of the interaction actually occurs through quick pop-up windows instead of taking you to a whole new page. Luke also discusses the Comcast site where he encountered a sign up process that was done entirely in a pop-up window. Inline input is good, but sometimes it just isn’t appropriate. In the case of Comcast, Luke felt it was inappropriate for the sign up process to be in line, rather than in its own page.

This has just been a very brief recap and explanation of the topics discussed by Jared and Luke. Beyond what I have discussed here, Jared and Luke go on to discuss topics such as Apple’s Ping network and reusing information you have already loaded onto another site such as Facebook.

Advertisements

>Navigating the Maze that is the Web

>

Even the most experienced users of the web come across difficult web sites from time to time.  Navigating the web can quite literally be a maze.  Check out this mouse maze to experience the frustration that comes from inconsistent navigation.  Navigation schemes differ from site to site, and even some times within the same site!  Why do we encounter sites such as those?  Quite simply because the people who create them probably never knew much about web usability.  Now, I’m not trying to knock anyone’s website but let’s face it, not every site on the web is usable.


Tips for increasing web usability….

The following tips come from (http://www.humanfactors.com/downloads/10tips.asp)

  1. Motivate users – you need to draw in your users to your site
  2. Define user task flow – your site design needs to match what the users expect
  3. Architecture – it’s 80% of usability.  Navigation needs to be intuitive and obvious to the user.  Remember – if they can’t find it in 3 clicks, they’re gone.  
  4. Affordance means obvious – leave no doubt as to what you mean with everything in your design
  5. Replicate – learn from others and use the resources available to you
  6. Usability test along the way – test early and test often to avoid headaches later in the process
  7. Know the technology limitations – Identify and optimize for target browsers and user hardware.Test HTML, JavaScript, etc for compatibility.  
  8. Know user tolerances – Users are impatient. Design for a 2-10 second maximum download. Reuse header graphics so they can load from cache. Avoid excessive scrolling.  
  9. Multimedia – be discriminating – animation can be great for drawing attention but don’t overdo it
  10. Use a stats package – monitor traffic through your site. Which pages pique user interest? Which pages make users leave? Adjust your site accordingly. 

As you can see there is a lot that goes into designing a usable web site.  What may be usable to you, may not be usable to someone else.  I know from experience that what I find to be usable is many times not usable to others.  I have a tendency to look at web sites from the perspective of the developer of the site and I have to make a conscious effort to place myself in the role of a user of the site I am building.  This is not an easy task to accomplish so I rely on the opinions of others to make sure I am on the right track with a site design.  Hopefully these tips can help you create a more usable site.


    >Web Typography

    >When you visit a website what is the most important thing?  Normally it is the content and many times, text is an important part of the content.  The typography on a site communicates the tone an impact of the content.  Web typography is the art of arrangement, style, appearance, and printing of type.  Web typography has come along way since the web’s inception when we were limited to a handful of fonts which could be used.

    Understanding the basics

    Web typography is anything but easy.  There is a lot more that goes into it other than choosing a font.  The image below, originally found here, shows various typographic definitions.

    Confusing isn’t it?  As you can imagine, it can be quite frustrating to keep up with all of that.

    And that’s not all!

    There is also, typographic scale, CSS, vertical rhythm, browser design, the list goes on and on!  Web typography is important to remember when designing a site and not every one will have a natural ability for it.  It can be easy to just focus on the content of the site and over look the text itself but you need to make sure you pay some much needed attention to the text itself.
    I would by no means consider myself to be an expert in web typography.  However, I can recognize its importance.  How a website looks on a first impression can make or break your site.  Whether you realize it or not typography can have a significant impact on the look and feel of the site.  Being that I work in web development I understand what it means for a site to “feel good” to the users but I’m not always good at making it that way and I will be the first to admit it, I many times will overlook the typography in sites I design.

    There’s always room for improvement

    There is always something you can learn when it comes to web design.  My advice is to make sure you know when to ask for help and don’t be ashamed to ask for help.  We all have our strengths and weakness and we should lean on each other and make the Internet a better place for us all.  Below I have listed some resources I have found to be useful on web typography.  Please feel free to make your own additions to my list.

    Typography for the Web
    6 Ways to Improve Your Web Typography
    The Elements of Typographical Style Applied to the Web
    50 Useful Design Tools for Beautiful Web Typography
    10 Web Typography Rules Every Designer Should Know