Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 6 1 2 3 ... LastLast
Results 1 to 10 of 56
Like Tree1Likes

Thread: How to Design a Site for EVERYONE!

  1. #1
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    How to Design for Everyone!

    How to Design for Everyone

    by Steven Moseley

    Preface

    The primary topic of interest regarding Internet content over the last several years has been usability. The Internet is the world’s largest information store. Unfortunately, it’s also the least usable. There are two primary reasons that the Internet is not usable:
    1. There is no formal standard for usable interface design established for the Internet. Each site follows its own navigation standard.
    2. Many web designers just don’t know how to make usable design!

    Looking at the Internet these days is like a rollercoaster ride. There's such a variation of content and aesthetics that it's almost painful for you and me to navigate through it all easily. What’s more, the usability standards (if any) that have been implemented in each website are incomplete. They address specific audiences or none at all, and often neglect the fact that humans will eventually have to use them, sacrificing usability for art.

    The Psychology of Information Architecture

    Cognitive psychology represents the dominant approach in psychology today. A primary focus of this approach is on memory (the storage and retrieval of information), a subject that has been of interest for thousands of years.

    Nielsen standards for navigational structure, which are in use in almost all large-scale websites today, are based upon a specific set of immutable rules and logic. They are directed at one learning profile of the populus - disregarding many people who are incapable of learning structures organized in the ways Nielsen suggests. This paper will break down all of the learning profiles that apply to information architecture based upon the leading learning theories, with specific examples of how to put them into place.

    The Felder-Soloman Learning Style Theory groups the populus into the following primary groups of learning or thinking capacity. There are many studies that divide people based upon multiple criteria, but for the purposes of this paper, we will use this leading learning style model:

    Felder-Soloman Learning Styles
    • Sensing vs Intuitive
    • Visual vs Verbal
    • Inductive vs Deductive
    • Active or Reflective
    • Sequential vs Global

    Based upon these models, we can devise appropriate content for each type of individual based upon the applicable method of learning / thinking. The premise is that if an individual is more prone to learn in a specific manner, then constructing the Information Architecture of your site as tailored to your target audience's learning preference would increase usability.

    Visual vs. Verbal

    Visual Learners tend to grasp information that is presented visually with more consistent success. In the case of navigation, Visual learners will do better with icon-based navigation, or navigation that contains some form of graphical manner of conveying importance or priority (for instance, size, style or weight of font).

    Verbal Learners tend to better grasp information that is presented textually. However, overly abstract verbage may heirarchically reasonably well. The do not do well with abstract visual information, such as icons, as representations of navigable elements. Therefore, a simple, consistent, heirarchical text navigation would work best for them.

    In consideration of both of these types of thinkers, it is important to present a navigation that contains both text and images or icons as a means of visual determination. In doing this, you will ensure that you're not alienating your visual thinkers by presenting a text-only interface or your verbal thinkers by presenting a completely graphical interface.

    Alternative to the use of iconography, you may use words of different shapes and lengths, which has the odd effect with Visuals of presenting a makeshift iconography for them. For example, the terms "Home" and "About Us" each have a unique shape. Many visuals, when familiar with a set of uniquely-shaped words, will remember them not by the words themselves, but by the shapes of the words. Thus, providing clearly visually discernable words in your navigation will be an additional asset for navigability.

    Inductive vs. Deductive

    Deductive Learners prefer highly structured presentations, with clear rules of organization. They are capable of dissecting a navigation based upon organizational divisions, such as departments, categories, or divisions. Therefore, to create an architecture that would be easily navigable by concrete thinkers, you could break down your organization division by division and present the heirarchical structure that results as your navigation.

    Inductive Learners are more difficult to navigate through a website. According to Richard Felder, they prefer to learn a body of work by seeing specific cases (examples) first. In the case of navigation, Inductive learners would prefer to have examples of what each item of navigation might pertain to.

    Let's say, for example, we were designing a website for a company that offers technology services. The services they offer are:
    • Technology Consulting,
    • Application Integration,
    • Custom Software Development, and
    • Deployment and Support

    In the "Services" section of the client's main menu, we would have secondary links for each service offered subordinate to the primary "Services" link. This would appease our deductive learners. For our inductive learners, we should present the links again in the main body of the "Services" page with brief descriptions and illustrations pertaining to each, perhaps giving an example of what "Technology Consulting" means.

    Active vs. Reflective

    Active Learners tend to retain and understand information best by doing something active with it, that is, applying it. Reflective Learners do better by thinking about new information and processing it quietly in their heads to comprehend or memorize.

    This learning style is particularly relevant in the case of forms, wizards, and complex processes that require a certain absorption of information to learn how to use your website.

    Active Learners often learn from their own mistakes, and may skip over a large chunk of text explaining how to properly register or complete a complicated process, potentially irreversibly failing, and frustrating them to the point where they abandon your website.

    Reflective Learners, on the other hand, may get frustrated with interactive tutorials and demos, preferring instead to read and absorb some text or have a look at the process itself and get a sense of what it's about.

    Some techniques you can use to address both learning styles and decrease abandonment:
    [list][*]Break down long forms into a 3-step wizard with no more than 10 fields per step. If you need to reduce your total # of inputs, do it. If you need more information than 30 inputs can provide, break your process into multiple separate transactions so that your user can complete each with less need for understanding (requiring intellectual exertion).[*]At the end of a long process, always use a recap/confirmation screen allowing users to edit incorrect information. Make the recap concise and organized, with a very large button to "complete" the process. If the user inadvertently abandons this page, there should be a popup warning them that they're abandoning the process, or storage of the entered information with information and tools to allow the user to complete at a future time.[*]

    Environment

    The environment you create in your website makes a significant difference in your visitors’ ability to concentrate on the navigation and content displayed in your site. Website visitors are more relaxed and comfortable in environments that they are familiar with. In terms of website navigation, this simply means presenting it in a manner that would be familiar to your target audience.

    Aural Distractions

    Different individuals are more comfortable working under different noise conditions. Some like to have ambient noise such as music to drown out other noises while others require absolute quiet (e.g. Reflective Learners). Take this into account when you are deciding whether or not to add a music track or event sounds to your site.

    Visual Distractions

    Perpetual animations in a page, while creating a “cool image,” could alienate some of your visitors who are easily distracted. The constant movement could keep their eyes off the most important part of your website – the content!

    Type Setting

    Many times this simple consideration is overlooked. The brightness and font of your type can make a large difference on the ability to keep your visitors’ eyes from hurting or becoming tired.

    Serif vs. Sans-Serif

    Serif fonts (such as Times New Roman) are the preferred font for print media. They are actually PROVEN to increase readership of printed materials by 20% over sans-serif fonts (such as Arial, Helvetica or Verdana).

    The main reasons for this are:
    1. Serifs (the short lines at the end of the main strokes of the characters) make letters more easily discernable to the eye.
    2. Every book you've EVER read uses the same serif font (similar to Times New Roman)
      Because of these compelling figures, smart print ad men use serif fonts exclusively.

    Serif vs. Sans-Serif on the Web

    I don't think the same rules necessarily apply to the web. The main reason for my theory is that pixilation of fonts makes serif fonts (such as Times NR) actually more difficult to read on a monitor at smaller font sizes (i.e. 12 pt). Printers with anti-aliasing and 600 pixels / inch will obviously get a much clearer rendering of a letter than a hard-edged 72 dpi monitor.

    For this reason, I tend to agree with most web designers that sans-serif fonts are nicer for the web.

    However, Microsoft has lately been researching a technology called "Sub-Pixel Rendering", which splits each pixel into its base components of red, green, and blue. The RGB sub-pixels are each a vertical 1/216" x 1/72" rectangle of solid color. Colors on your monitor are achieved by adjusting the light emitted by each RGB sub-pixel in accordance with the RGB value of the color intended to be represented by the parent pixel. Sub-pixel rendering, in essence, divides each pixel into its three vertical components, allowing for a 3x greater resolution for black / white hard-edged fonts (such as those used in web pages).

    Additionally, with ever-increasing monitor resolutions, fonts are going to soon get necessarily larger (imagine a 10 pt. font on 2560 x 2048).

    Pictures and Imagery

    Remember the adage, ‘A picture is worth a thousand words’? By augmenting written copy with pictures and imagery, you can create creating your own visualizations or looking at pictures of the information, you will be more easily able to remember information. Don't forget to add alt attribute values for the visually impaired!

    Meaningfulness

    If information is not meaningful, it has no place on your website. Meaningful material would include information that is pertinent to the object of your website. Besides meaningfulness, it’s also important to make sure that your navigation allows visitors to reach the content they want more easily. Many visitors, frustrated by ambiguous menu names or too much content that’s not pertinent to their searches, will leave a site within minutes.

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    *sigh* Just tell me the amount...
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    LOL... did you catch the other three?

    No worries about the TD.

  5. #4
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Nice read
    JR

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Thx.

  7. #6
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    Heh, that was a deadly read. Is this Psychology?

    Sounds like it to me anyway, <suckup> Transio sure is a smart, intuitive guy... </suckup>

    Anyway! I liked it, I learned something new!


  8. #7
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    interesting, keep it up and it might come through my thick skull :tired:

    lol (no offense)

    good read
    tekp :cheeky: tekponline.com

  9. #8
    Junior Member
    Join Date
    Feb 2004
    Location
    United Kingdom
    Posts
    6
    Member #
    4990
    hey man excellent tutorial. it actually made sense which is a first for many tutorials I read. where did ya get it from anyhoo?

  10. #9
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Thx. I wrote it.

  11. #10
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    It is a good tutorial Transio! Now I just have to get around to reading the others you wrote at the same time! :-P
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile


Page 1 of 6 1 2 3 ... LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com