Tips for better web design
The design of web sites and web pages is still in its adolescence. Many web designers are still learning to embrace the needs of the users.
Web design objectives & considerations
• Short download time: minimal graphics, no Flash gimmicks
• Easy to navigate and access: constant menu on the left side
• Minimum number of pages to get to destination: use menus or search index
• Easy to read: readable point sizes, common fonts, black type on white background
• Maximize live area
• Minimal scrolling
• Consistent layout on pages
• Visual appeal
• Collapsibility to adapt to a variety of platforms
• Seekers: someone accessing specific information
• Users: someone specifically exploring this site
• Browsers: surfers accidentally hitting site
From the Plain Language.gov website:
Planning a Plain-Language Website
Users require three things when using a website:
1. a logical structure so they know where to look for information,
2. an easy-to-use interface to get them to that information,
3. and easily-understandable information.
A website needs all these elements (information architecture, usability, and plain language) to be successful.
Please don't make the web user scroll too much
I was seeking info on the annual Christmas dinner in downtown OKC, so I went to their website. The left image is what a surfer sees on the home screen. Of all the screen space allotted, this site uses only the blocks in yellow - the rest is wasted and of no value. The user must scroll down to get more info. The image below on the left shows the entire site, that took about 4 screen scrolls to access. The photos appear in a random slideshow sequence.
Reminder: People now go to the web primarily to watch cat videos and to seek information. Ignore the cats, but, please, provide info for users in an easy to navigate format. The less scrolling, the better.
Above right is a redesigned home page - in fact, it's now the only page. All the information and menu links can be seen on the page with no scrolling. All the type point sizes remain the same. The pertinent info is in the top red banner, the photos have been cropped and can now be seen all at once, and the explanatory info and links are towards the bottom. Now, the eye can scroll around the page to find the desired info, rather than the finger or mouse having to scroll down.
Side by side comparisons
Another example of wasted white space - requiring too much scrolling
Example below: Nobody cares much for pretty pictures - the visitor wants information and easily accessible. Better: minimize the size of the picture (even more than I show here) and decrease the excessive white space.
Avoid additional unnecessary webpages
Above: the webpage of Donor Centers on the OK Blood Center website. To find a Donor Center, a list appears, but the locations in the OKC metro area are grouped within an additional menu (middle photo below).
There is no need for the additional menu - all of the locations can be listed in one menu (as in the blurry example on the far right). The list is alphabetized. Putting OKC first in their names allows the two locations to be next to each other in the list. People living in Norman or Midwest City would more likely check a list for Norman or Midwest City, rather than as a subset of Oklahoma City.
Below: two screens/pages needed to access one list of Donor Centers.
Below: one screen/page to access one list of Donor Centers.
Many people today seek information immediately and easily. Adding unnecessary links or pages bogs down the process of using the web to access info.
Lesson: websites are more efficient when there are less links to open or pages to access.
The component of proximity
Proximity refers to grouping bits of information or elements close enough to form an association. This grouping provides some comfort through familiarity. We humans like change but only if we can experience it from a foundation of something comfortable. Grouping like elements also aids clarity of understanding of information by creating a hierarchy of information.
From the essay, Design Components
On the website for Fetch, a file uploading service, the home page (on the left below) requires the user to scroll down to access more information.
There is generous leading and much wasted space. I tightened it up as shown on the right. The text point sizes are all the same, no information is lost, and there is no need to scroll down.
One objective for effective web/app design: minimal scrolling and swiping.
Lesson: The experience of visiting a page and seeking info is enhanced if there is less need to move to other pages. People have evolved past being intrigued by artistic web design - we want information and we want it efficiently. Phone apps, Facebook, and email programs have acknowledged this and often let us get right to the content.
The graphic elements of a bar, rule, or line can serve as an organizer to separate disparate images and text. We are conditioned to seeing lines as separators. But, in the above example, the lines are in the wrong places. Lost Your Serial Number? is separated from its accompanying text. The text copy, "If you already purchased . . ." is closer to the heading Need Help Getting Started than to Lost Your Serial Number?
Below is the improved version - the line separates the two sections of different thoughts. Each heading and its accompanying copy are in closer proximity. making it easier for the reader to comprehend.
Lesson: Group together associated elements (text, images) to create a single visual unit.
Setting text blocks for better readability
Notice the block of text copy in the lower right of the page, enlarged above and below:
On the left: The body copy as originally set. Copy that is set justified (both margins aligned) creates inconsistent letterspacing and word spacing - notice the line:
through education and the
Those differing gaps annoy the brain and slow down readability. Above, on the right: How it would look if it was set flush left, ragged right. Now, there are no inconsistent gaps - all letter and word spacing is the same, providing a more comfortable flow for the brain to read efficiently.
Even better: Copy block set FLRR but with the margins manipulated so the lines are of a more consistent width. The punctuation also hangs outside the margin - notice how much better the left margin looks when the quote marks are not inside the margin. Another example: