WEB DESIGN

USABILITY
LECTURE 6

SYED MUHAMMAD JUNAID HASSAN

 DESIGNING INDIVIDUAL
PAGES
• Now that we’ve reviewed the basics of user flow
• it’s time to learn how to design the individual web
pages
CONTENT STRATEGY
• When it comes to web page design, the most important
thing is to design around the page’s objectives
• Content strategy refers to planning, creating, and managing
content on your website
• Content strategy will help with this exercise
• Each page has its own goal, such as informing visitors
about something or encouraging them to convert
• Once you understand the goal of the page, only then should
you work on the design or write the content
HERE ARE A FEW
PRACTICAL TIPS
AS YOU
CONSIDER YOUR
CONTENT
S T R AT E G Y
PREVENT INFORMATION
OVERLOAD
 PREVENT INFORMATION
OVERLOAD
• Too much information on a page can easily overwhelm visitors.
• There are some simple ways to minimize information overload.
• One common technique is chunking: breaking content into smaller
chunks to help users understand and process it better.
• A checkout form is a perfect example of this.
• Display, at most, five to seven input fields at a time and break
down the checkout process into easy steps
PREVENT INFORMATION OVERLOAD
AVOID JARGON AND
INDUSTRY-SPECIFIC TERMS
• Touch base
• Ninja
• Move the needle
• Leverage
• Magic bullet,
• Jump the shark
• Herding cats
• Fish or cut bait
• Bleeding edge
• 800-pound gorilla
AVOID JARGON AND
INDUSTRY-SPECIFIC TERMS
• Each unknown term or phrase that appears on the page will make it
that much harder for visitors to understand the information
• A safe bet is to write for all reading levels and pick words that are
clearly and easily understandable to everyone
MINIMIZE LONG SENTENCES
• Write in small, scannable segments
• According to Robert Gunning’s book “How to Take the
Fog Out of Business Writing”, sentences should be 20
words or fewer.
AVOID CAPITALIZING ALL
LETTERS
• All-caps text is fine for acronyms and logos.
• But it’s best to avoid all caps for
• Paragraphs
• Labels
• Errors
• notifications
• In his book Legibility of Print, Miles Tinker mentions that
all-caps dramatically reduces the speed of reading
PAGE STRUCTURE
• A properly structured page will help visitors find each user interface
element
• While there are no one-size-fits-all rules, there are a few website
design guidelines that will help you create a solid structure
MAKE IT PREDICTABLE
•  Look at your competitors’ websites, identify common design
patterns, and align with user expectations by using design patterns
that are familiar to your target audience.
USE A LAYOUT GRID
• A layout grid divides a page into major regions and defines
the relationships between elements in terms of size and
position.
• With the help of a grid, combining different parts of a page
in a cohesive layout becomes much easier.
USE A LOW-FIDELITY WIREFRAME TO
PRIVATIZE ESSENTIAL ELEMENTS
• Wireframing can save web designers a lot of time
• Before building the page with real elements, create a
wireframe, analyze it, and remove anything that isn’t
absolutely necessary.
• A wireframe is a schematic illustration of a page interface
used to demonstrate the placement of content and
functional elements on the page
• Wireframes help establish relationships between individual
pages and serve as a foundation for prototypes
VISUAL HIERARCHY
• People are more likely to quickly scan a web page than to read
everything there.
• Therefore, it’s a good idea to optimize your web page design for
fast scanning.
• You can help visitors find what they need with a good visual
hierarchy, which refers to the arrangement or presentation of
elements on a web page in a way that indicates their importance
(that is, where their eyes should focus first, second, etc.).
• Good visual hierarchy can significantly improve page 
scannability.
USE NATURAL SCANNING
PATTERNS
• As designers, we have a lot of control over where people look when they’re viewing a page.
• The F-shaped pattern and the Z-shaped pattern are two natural scanning patterns that can help
you to set the right path for the visitor’s eyes.
• For text-heavy pages, such as articles and search results, the F pattern is better, whereas the Z
pattern is good for pages that aren’t text-oriented.
VISUALLY PRIORITIZE
IMPORTANT ELEMENTS
• Make important elements, such as key content or your primary call-
to-action buttons, the focal points so that visitors see them right
away.
CREATE MOCKUPS TO
CLARIFY THE VISUAL
HIERARCHY
• Mockups are high-fidelity design artifacts that
enable designers to see what the final layout will
look like
• Rearranging elements in a design tool is much easier
than doing it with code
SCROLLING BEHAVIOR
• A persistent myth among web designers is that people don’t
scroll
• To be clear: everybody scrolls, and people start to scroll
almost instantly as they land on a new page
ENCOURAGE USERS TO
SCROLL.
• Despite the fact that people usually start scrolling as soon
as the page loads, content at the top of the page is still very
important.
• Put your most compelling content at the top:
• A good introduction. An excellent introduction sets the context
for the content and answers the visitor’s question, “What’s this
page all about?”
• Engaging imagery. Good imagery can accompany text and help
visitors better understand the idea or topic.
 REFERENCES
• Web Page Design: A Comprehensive Guide | Adobe XD Ideas