Designing for the Web - cs.umd.edu€¦ · Designing for the Web Design Issues Technical Issues...

1

Designing for the Web

Design IssuesTechnical Issues

Past, Present, Future

Some Web-Specific Design Issues

Earlier in the semester we explored visual design in general. With the web, there are often different (additional) issues to consider…

• Breadth vs. Depth

• Navigation vs. Content

• Seller vs. Buyer (i.e., Designer vs. User)

• Colors and Images

Several images in this presentation are from “Designing Web Usability” by Jakob Nielsen [New Riders 1999]

Evan Golub / Ben Bederson / Saul Greenberg

2

Breadth vs. DepthNumerous studies starting in the 1980s showed that when designing

menu structures, you should aim for breadth over depth, but not too broad. Miller’s famous 1950s “7±2” study showed that people’s short term memory consistently was limited to about 7 things. The good news is that he also observed that people could “chunk” things, and thus remember more.– Miller, G. A. (1956). The magical number seven plus or minus two: Some limits

on our capacity for processing information. Psychology Review.

Sure enough, optimal menu/layout/options design was shown to typically have about 7 chunks of related items.

It is typically different when navigating on the web!Evan Golub / Ben Bederson / Saul Greenberg

Breadth vs. Depth on the Web (I)

It is possible to create an webpage that follows 7±2

http://www.cs.umd.edu/~egolub/old.index.htmlbut this is not commonly done because there is too little

information being presented. Instead, 7±2 is applied in sub-contexts, and has a very different look and feel to it.

Many sites reflect the approach of having 7±2 chunks of information, each of which might then be divided into 7±2 chunks of information. Google’s news.google.com and a number of other sites take this approach (Google News was generally better with two full columns though).


3

Breadth vs. Depth on the Web (II)

In practice, many sites and pages have gone to far broader designs to make it easier to be found by searches and also to support on-page search by users. As discussed, if you look at desktop software, you’ll see the 7±2 model often influences things like menu bar design.

Web pages have evolved since the early (1990s) days in many ways, but some broad issues still exist and deserve consideration…


Breadth vs. Depth on the Web (III)

What is different at a high level on the web?

• We need to think about data and/versus operation/navigation links.

• Even with a “faster Internet” and “faster machines” users have very

different speed experiences and pages have more content, which can

leas to slow load times (impacts exploration) that installed software

doesn’t have.– Can create “lightweight” pages (smaller image and file sizes, no complex

scripts).

• Designers enjoy a greater sense of flexibility in layout in general.

• Search tools exist for information seeking overall or within a page.

• The concept of a “portal” introduces a different mindset.


4

Historic Breadth vs. Depth StudyThe following study attempted to examine this question carefully:

Web Page Design: Implications of Memory, Structure and Scent for Information

Retrieval Web Page Design / Kevin Larson / Mary Czerwinski, CHI 98, p.25-32.www.acm.org/pubs/articles/proceedings/chi/274644/p25-larson/p25-larson.pdf

They compared 512 items from Encarta encyclopedia in structures of size:

8x8x8 16x32 32x16

Note: They did not have the “slow link” factor so this experiment might not apply to the “mobile web” in general right now but it’s certainly getting close.


• Short term memory is only one factor.

• Limiting depth is more important than

increasing breadth.

• Chunking of information is a likely

important factor.

Menus and Option Naming/Grouping

There are many ways to involve the user in the design and organization of a website’s menus.

“Card Sorting” provides several variations to support different levels of freedom for the representative users brought in. https://www.usability.gov/how-to-and-tools/methods/card-

sorting.html

There are similarities between this and the sticky note thematic clustering that we’ve discussed this semester.


5

Navigation -vs- Content -vs- Advertising

Nobody “wants” to navigate, but to many degrees navigation is still a necessary evil (unless we give up and use our favorite search engine, which is a sign of design failure for a site).

Screen space taken up with explicit navigation typically takes away from actual content.

The early Mapquest example on the next slide, from the late 1990s shows how extreme the imbalance can be, as do the slides with the Diamondback and Facebook screens.


Early Map Site

6

23.5%

BLANK2005

2016

Then it got worse! (my laptop)

BLANK!BLANK!

BLANK!BLANK!

7

…and stayed that way (my desktop)

BLANK!

BLANK!BLANK!

BLANK!

2017

…and didn’t seem to plan to improve (my laptop)

BLANK!

BLANK! BLANK!

BLANK!

2018

8

…and even got worse (my laptop) 2019

BLANK!BLANK!

…even after closing the ad (my laptop)

BLANK! BLANK!

2019

9

What about Facebook?

BLANK!

BLANK!

…or Facebook on my laptop…

BLANK!

BLANK!

2016

10

Designer vs. User

In this course we’ve been exploring user’s needs and

tasks…

Designers don’t/can’t always have the user’s best

interests in mind.

This might be “more” true for web sites than other

software where something is typically being sold

(a product, a university, a brand, advertising, etc.)


Seller vs. Buyer

Banner ads are the prototypical example. Users hate them,

marketers require them. Designers often are on the user’s

side, but employed in part to “serve” the marketers.

–The best thing you can do is probably to be aware of these

tradeoffs, and be able to make informed decisions.

However, consider the following 2012 question – why did Facebook feel Instagram was worth a billion dollars to them with no profits and no obvious profit model. Was the whole value in the users there? Do you think it was “worth it” looking back as we can now?


11

Colors and Images on the Web

If you change background colors, make sure you change the link, vlink and alink attributes or link, visited and activestyle selectors of your document to avoid “invisible” or annoying color combinations.

If you use a background image, make sure you can still read the text that is going to be on top of it. Test how that image will tile and how the text will move as the browser window is resized.

If you have many images, think about load time and whether the image will be understood at the display size.


Take Universal Usability Seriously

For example, when you have a color palette, test the contrast between foreground and background combinations: https://webaim.org/resources/contrastchecker/

Test a variety of window/device sizes to see how things appear (consider that a 15” monitor at 1400x1050 is different than a 21” monitor at 1400x1050.

If you don’t have access to certain devices, you can emulate many within web browsers like Chrome, but realize that they don’t always replicate the exact behavior of the actual devices… Evan Golub / Ben Bederson / Saul Greenberg

12

Give the users some hints“Describe” your links well. People will very often just read

the link text.

Not good… If you want more information, click here. Better but can be improved… Click here for more information.Or just be direct! More information.

Researchers call this “information scent” – users hunt for information based on the tiny fragments that they think will lead them in the right direction. This kind of “greedy” algorithm is known to be unreliable, but it’s how many users work. The third example above shows a good use of information scent.

Information ScentThe concept of information scent has been described as an approach that “conveys distal target information via category labeling.”

• Link coloration is a major tool that users take advantage of to help them understand their own history. Change colors with care. If you do change from the default colors, do not make them counter-intuitive.

• Support search on your page and site. If you do use images that contain words, make sure you have text descriptions (possibly in the alt description).

• If you have images that look like they can be clicked make sure the user can click on them! Don’t do this:

http://www.cs.umd.edu/~egolub/butterfly.html

• Further reading athttp://act-r.psy.cmu.edu/wordpress/wp-content/uploads/2012/12/515uir-2004-07-pirolli.pdf

13

Study Where People Look

http://www.eyetools.com/inpage/research_google_eyetracking_heatmap.htm

Technical Issues

Download time

Browser compatibility

Screen size and resolution

Separation of meaning from presentation


14

Download Time

People have different resources (eg: home vs work vs mobile).

• Access rates are a moving target. Back in 2007 you had 20% of

users who had Internet in the US still having “narrowband” access

at home. Broadband is the norm now, with a 15Mbps US home

average, but there is a wide range.

• Mobile is far faster than it was, but still only around 5Mbps as a

national average. Individual bandwidth might be throttled or

congested (big issue with mobile) and server loads can be an issue.

Keep these in mind as you place images, videos, etc. on web pages

since the more you place there the longer it will take to load. One

study from 2011 said that the size of videos on web pages (on

average) had tripled since 2003, and they just get bigger…

Is it worth the wait?The following all have the same “image” but at different

resolutions (and thus quality).

http://www.cs.umd.edu/~egolub/360/IribeCSIC/2018-03-25-higher/index1scaled.html

http://www.cs.umd.edu/~egolub/360/IribeCSIC/2018-03-25-higher/index1full.html

http://www.cs.umd.edu/~egolub/360/IribeCSIC/2018-03-25-higher/index6.html

15

Historic Data for 1995-2001…


Internet Use by Connection Speed in millions of peopleSpeed 2000 2001

High 8 (10.9%) 17.7 (17.5%)56K 49.7 (56.9%) 64.3 (63.4%)

28.8/33.6K 24.2 (27.7%) 15.5 (15.3%)14.4K 5.3 (6%) 3.9 (3.8%)

87.3 101.4

Browser VersionPeople historically had tended to upgrade

browsers slower with each successive version, and it would often take an operating system upgrade to get a browser upgrade.

However, the current trend of supporting automatic upgrades and of sites restricting users of old browsers has changed that trend, but you can see how old versions stick around.


16

Dealing with Browser Versions

Firefox saw high initial penetration (especially in academic settings)

though it leveled off. Chrome is currently the “top dog” browser,

and they seem to have an update every week…

• Ideally, you should collect browser versions and software platforms to

test your site. While some software/platforms do not make this easy, if

you design pages as a career, it is worth your time to set up a machine

with multiple “virtual” machines, and have a different version of each

browser on each “machine”.

Also, consider that some devices might have non-standard, possibly

custom-written, embedded, browsers.

Finally, different sites draw different browser audiences, so you

should learn about your current audience.Evan Golub / Ben Bederson / Saul Greenberg

Screen Resolution: Historic DataSome historic distribution of desktop/laptop monitor

resolutions against the 1024x768 mark:

netmechanic.com:Screen Resolution 1997 1999 2001≤ 640x480 22% 13% 5%800x600 47% 55% 53%≥ 1024x768 31% 27% 41%

statmarket.com:Screen Resolution 2000 2003≤ 800x600 66% 42%≥ 1024x768 34% 58%


17

Screen Resolution: Modern Data

Of course, this is “desktop” not mobile…

steampowered.com (2018, ones with more than 1% popularity among their users)

1280 x 1024 1.58% 1360 x 768 1.31% 1366 x 768 9.86% 1440 x 900 2.39% 1600 x 900 2.59% 1680 x 1050 1.83% 1920 x 1080 72.01% 2560 x 1440 3.50%


W3Schools Stats History (note that there are differences for 2018 from previous slide – why?)

http://www.w3schools.com/browsers/browsers_display.asp

18

Screen Resolution: 2012 and now

By 2012 things were at a point where 85% of screens of those

visiting W3Schools were larger than 1024x768 and it just kept

rising. However, smartphone and tablet device penetration

means that lower resolution and physical size screens are in

wide use (even when the resolution is higher, on mobiles the

screen size itself might be rather small, like how the iPhoneX

is 1125x2436 but the ppi is 458).

When the iPhone was first competing with Android phones, one

of the “sales pitches” of developing for the iPhone was a

standard resolution across all models. Those days are long

gone…Evan Golub / Ben Bederson / Saul Greenberg


Screen Resolution: Discussion

For home/work we now need to consider widescreen versus 4:3

aspect ratio monitors. We should also consider whether or not

users are using their full screen resolution for the browser. For

smartphones and tablets we need to consider physically smaller

screen sizes and/or lower resolutions but also different aspect ratios.

Overall we might want to consider who might be the “typical visitor”

for a particular site and attempt to determine their stereotypical

screen resolution or have multiple versions that load based on the

device stats.

There are tools to test your webpage at different resolutions (Chrome

built-in, some plug-ins, some websites).

19

Content Formats/Resources

HTML, CSS (Visit the CSS Zen Garden…)

Frames (difficult to do well and not recommended)

Javascript, PHP

Java, Flash

Plugins, Add-ons…

How long will they exist? How cross-platform are they?

Which elements differ based on the platform or version?

What’s “easy” to do?


How to Build Web Prototypes?Start with a drawing program or prototyping tool – not live pages on

the web! Build “wireframes” – the rest is the same as with other software…


Example Layout Model(1) Logo

(2) Local or Site Index w/Links(3) Search Dialog

(4) Current date(5) Primary Content(6) Secondary links

(7) Last update, copyright info, etc.

Each item should have more information for each item with explanations and justifications.

1

2 3 4

5

6

7

20

Hit a HOME RUN with Nielsen?

High-quality content

Often updated

Minimal download time

Ease of use

Relevant to users' needs

Unique to the online medium

Net-centric corporate culture


Really not sure I like this (b)acronym…

Universal AccessibilityWhile it is important to consider users and their connection

speeds, screen sizes, browsers, etc. it is also important to consider different types of users such as:• elderly users, younger users, novice users

• users with poor motor control / precision

• users with visual and/or hearing impairments

• users with poor short-term memory

Consider using things like:

• the WebAIM color contrast checker when thinking about colors

• the Siteimprove Accessibility Checker Chrome plug-in to help

you find issues.

21

Search Engine optimization

Good search engine optimization is also something to consider in terms of accessibility considering how many users utilize general search (perhaps after too much disappointment with site design). This should not be seen as a replacement for good site design, but a complement to it. Words over images, etc. all help here too…

True anecdote: I wanted to find out what time my doctor’s office opened so I could pick up a form so I searched on his name to find his site. Google “told me” his office opened at 7:30am but I wanted to confirm on the site itself and it was hard for me to find that info there…

Television-Based Interfaces

Set-top boxes have been used by some as web browsers, and some modern ones have had a wide range of features, and their designs are sometimes influenced by “web” thinking (or “mobile” thinking) yet users might typically interact with them via a very limited remote control rather than keyboard and mouse.

22

Television-Based Interfaces

As an example, a visual design that works well for a video

service within a web browser on a laptop or in a mobile app

might be a nightmare in the context of an On-Demand system

for a cable box. Thinking about the use of the number keys’

“letters” and “smart” interpretations of them and speaking to

the remote could expand ease of use…

Consider if I pressed “827” – perhaps generate a dynamic

menu of what it could mean, like channel 827 or TBS as a

network (or VCQ but only the first two of those make sense

in the context unless there was a show with VCQ in the title,

in which case maybe list any available eps as options).

Seeing the past, considering the future…

A valuable resource for seeing how webpage design has evolved (or perhaps devolved in some cases) is http://archive.org

For example…

https://web-beta.archive.org/web/19971009103122/www.umd.edu

https://web-beta.archive.org/web/20080711012948/http://www.umd.edu/

https://web-beta.archive.org/web/20160930143929/http://umd.edu/

Designing for the Web - cs.umd.edu€¦ · Designing for the Web Design Issues Technical Issues...

Documents

Transcript of Designing for the Web - cs.umd.edu€¦ · Designing for the Web Design Issues Technical Issues...