1. CS 321: Human-Computer Interaction Design
Lesson Twenty-One
Designing for the Web
Website Navigation
Searching
Responsive Design
Chapter 20

2. Primary Navigation
Primary navigation refers to the mechanism by which users get to the major areas or sections of a website or application.
This site uses left-side navigation on the home page, but requires a mouseover to access the product categories on all other pages.
CS 321
Lesson Twenty-One
Designing for the Web
Page 290
The biggest advantages of left-side navigation are that items can be longer, there can be more of them, and their left alignment makes them easier for users to scan.

3. Top Navigation
Top navigation is a superior approach in most cases, since side navigation makes the page appear crowded, occupies the page’s visual entry point, and forces the user to scan past it to read content.
The biggest limitation of top navigation – that it can only accommodate a few items of limited length – has the potential benefit of forcing designers to reduce a website’s number of major areas and to keep titles concise, which tends to make the site more understandable and useful to users.
CS 321
Lesson Twenty-One
Designing for the Web
Page 291

4. Dynamic Hiding
The visibility of navigation controls is sometimes effectively adjusted to be dependent on the user’s location in the system or even the user’s location on a page.
The left-side navigation controls are persistent for this site, but the branding and other elements at the top are minimized when the user scrolls down, in order to consume less screen real estate and visual attention as the user engages with the rest of the page’s content.
CS 321
Lesson Twenty-One
Designing for the Web
Page 292

5. Secondary Navigation
Meaningful navigation past a few top-level links necessitates access to secondary navigation mechanisms.
With “fat navigation”, hovering over the primary navigation provides easily accessible links to sub-pages.
“Breadcrumbs” are provided to show the user’s current location within the site and to provide easy navigation back upwards.
CS 321
Lesson Twenty-One
Designing for the Web
Page 293

6. Searching: Auto-Complete
To facilitate finding information on the web, search engines provide an auto-complete capability that presents a list of complete search terms based upon the user’s partial input.
Each search engine begins with a large list of “seed” URLs and uses a “spider” program to recursively accumulate links, the text of which are examined and indexed.
When a search term is entered by a user, the current catalog of indexed terms is searched for closest matches.
CS 321
Lesson Twenty-One
Designing for the Web
Page 294

7. Searching: Refinements
When the input doesn’t match any of the indexed search terms, the search engine will often “auto-suggest” a similarly spelled word that is more commonly searched as a suggested alternative.
When a single search term yields too many results, a faceted search, in which the user may specify additional attributes for refining the query, may prove useful.
CS 321
Lesson Twenty-One
Designing for the Web
Page 295

8. Responsive Web Design
To provide an optimal interactive experience across a wide range of devices with minimal resizing, panning, and scrolling, responsive web design has been developed as a means to adapt layouts to the particular viewing environment being used.
CS 321
Lesson Twenty-One
Designing for the Web
Page 296

9. Fluid Grids
The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
CS 321
Lesson Twenty-One
Designing for the Web
Page 297

10. Flexible Images
Flexible images are also sized in relative units, to prevent them from displaying outside their containing element.
As the page becomes narrower, the images are scaled accordingly.
When the original images are excessively scaled down, they are replaced with images that look better at this scale.
As the narrowing continues, the images are stacked until a minimum page width is reached.
Similar adjustments can be made when the page height is adjusted.
CS 321
Lesson Twenty-One
Designing for the Web
Page 298

11. Media Queries
Media queries allow the page to use different CSS-style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
CS 321
Lesson Twenty-One
Designing for the Web
Page 299

12. Responsive Web Design Fundamentals
Responsive designs fluidly expand, whereas adaptive designs hitch as you expand a browser or viewport.
Flow refers to how, as screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down.
Positioning design elements using pixels as X,Y coordinates can cause a site designed for one screen to look weird on another. Use relative units, like percent of the screen, instead of static units like pixels.
CS 321
Lesson Twenty-One
Designing for the Web
Page 300

13. Responsive Web Design Fundamentals
Breakpoints allow the layout to change at predefined points, i.e. having three columns on a desktop, but only one column on a mobile device.
Webfonts might look cool, but they extend the time it takes to download a page; using system fonts is quicker, but if a user doesn’t have the specified system font locally, a default is used.
By using nesting elements, collections of onscreen elements can be made to adapt to a shrinking or expanding screen as one, instead of individually.
CS 321
Lesson Twenty-One
Designing for the Web
Page 301

14. Responsive Web Design Fundamentals
Technically there isn't much of a difference if a project is started from a smaller screen to a bigger screen (mobile first) or vice versa (desktop first). Yet the mobile first approach adds extra limitations and helps with decision-making.
Sometimes it's great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense.
If an icon has a lot of details and some fancy effects applied, a bitmap should be used. If not, a vector image can more properly adapt to different resolutions.
CS 321
Lesson Twenty-One
Designing for the Web
Page 302