Thinking Beyond Decoration
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs
Many people regard web design as decoration; making a website look good. However, design is more about how something works than how it looks. It is about both form and function.
When designing a website, it’s easy to assume that everybody is like you. However, this leads to a strong bias and often ends in an inefficient design. You already know a lot about your services and your website. But your users just want to get things done on your website. They come for the content, not the design.
Content is by far the most important element in design. A webpage with a simple structure but quality content performs much better than a nice layout with subpar text.
Design Layout
F-Pattern
Typically for text-heavy websites, the F-Pattern comes from the reader first scanning a vertical line down the left side of the text looking for keywords or points of interest in the paragraph’s initial sentences. When the reader finds something they like, they begin reading normally, forming horizontal lines. The end result is something that looks like the letters F or E. Use the F-Pattern to enable quick scanning and encourage scrolling.
Example of the F-Pattern
Eye Tracking for the F-Pattern
Z-Pattern
Z-Pattern scanning occurs on pages that are not text heavy. The reader first scans a horizontal line across the top of the page. When the eye reaches the end, it shoots down and left, and repeats a horizontal search on the lower part of the page. Use the Z-Pattern to draw your users to your "Call to Action" that will be used on your homepage.
Example of the Z-Pattern
Using Images on Your Website
Graphics and images can make a huge difference in how your site appears and how users interpret its intentions. Images can help you attract attention and guide your users’ line of sight. They can be of great value when it comes to presenting important information.
- Image processing happens in a different part of the brain from where words are processed, so putting them with your words will engage more of your viewer’s brain.
- Images are especially effective to activate associations. If you spark an experience or memory with your image, you can convey meaning that goes well beyond the picture.
However, you should only use images that somehow support your content. For every image on your site, you should be able to answer four questions:
- Why did you chose that image and not a different one?
- Why did you place the image where you placed it, and not somewhere else?
- Who is your primary target audience and what type of imagery will speak to them?
- What underlying message are you trying to convey – Undergraduate Research wants to emphasize research outside of the science, so they could use photos of students in the field and not just in a lab.
Be Aware of What Appears Above the Fold
Because the area above the fold is the first part of your website people see, you should use it wisely. If you plan to use a large image at the top of your website, make sure it doesn’t push more important, informative, or catchy content below the fold. People will scroll if they feel like they will find the information they are looking for. It’s absolutely natural to scroll so give people a reason to scroll and look at the rest of your site.
Make sure you take into account how each graphic or image alters the overall appearance of your site. This includes paying attention to color scheme, negative space within the image, and the image’s actual content.
The Power of Directional Cues
Use visual cues to guide users to key areas of your website. Human beings have a natural tendency to follow the gaze of others, and we have been coached since birth to follow arrows directing us to where we should be looking/going.
Non-Directional Focuses only on the Face
Directional Focuses on the Face and the Text
Prioritize Information on Your Pages
Different information on your site should have different levels of importance. Your design should reflect their importance in the grand scheme of your site.
It’s important to correlate size with importance in a design. Objects that are bigger demand more attention. The biggest elements should be the most important in most cases; the smallest elements should be the least important.
Image Dos and Don’ts
The images people look at most have the following characteristics:
- Are high contrast and high quality (crisp and colorful)
- Are cropped, rather than overly reduced, when necessary to fit a small space
- Are not excessively detailed: easy to interpret, almost iconic
- Are highly related to the content on the page
- Possess magnetic features
Features that make images magnetic include the following:
- Smiling and approachable faces - They make us feel like we are actually connecting with other humans, not only with some coded website
- People looking at (or at least facing) the camera
- Clear instructions or information
People ignore images that have the following characteristics:
- Are low contrast and low quality
- Are too busy for the space
- Look like advertisements - People don’t like ads and over the years they have successfully learned to ignore them
- Are not related to content on the page or only slightly related to it - people look for the content and ignore unrelated visual noise
- Are boring
- Include people or objects that are generic or obvious stock art
- Are cold, fake, or too polished
If you have a large international audience for your website, be mindful of the size of your photos and make sure they are optimized for the web for quicker loading on slower internet connections.
Using Color on Your Website
Human visual attention first responds to contrasts in color and light, then to the emotional and cultural value of a specific color. Bright colors stand out from muted colors and you can exploit this to draw your user’s attention where you want. Additionally, certain colors can help set the mood of the entire site (blues are tranquil, reds are aggressive, etc.).
Repetition assigns relative meaning to elements; if all “paragraph” text is grey, when a user sees a new block of grey text, he can assume it’s another basic paragraph; when that same user encounters a blue link or a black title, he can safely assume it is different and unique from the grey text.
If you have a large international audience for your website, be mindful of the cultural implications of the colors and images you select.
Text
Special type styles (bold, italic, ALL CAPS) should be used sparingly
Don’t make every other word on your site bold or italic or in ALL CAPS. Only use them sparingly when you want to emphasize something important.
Don’t use centered blocks of text — justify text to the left
Text that is centered is fine for headlines but avoid it for paragraphs or other large blocks of text. Type aligned flush left provides the eye a constant starting point for each line, making text easier to read. The jagged edges of centered text take longer to read and tend to interrupt the flow of the text.
Don’t underline anything but links
People expect underlined text online to be linked to something. If it isn’t, you’ll do nothing but confuse your visitors.