it is important to understand that the number of pixels is not related to the physical size of the...

It is important to understand that the number of pixels is not related to the physical size of the screen.

Two 15" screens can have different screen resolutions

Software Design

The content of the lecture is oriented towards WebPage Design BUT remember that nearly all software will be

viewed on a monitor

Look at this example showing the same webpage viewed on the same monitor at two different screen resolutions:

Navigation menus

Banner advertisement

Central, single column text

Subsidiary menuSubsidiary menu

Most screens have a resolution of 800x600 pixels

Many have screen resolutions of 640x480 or 1024x768 pixels.Very few users have other screen resolutions

screen resolution stats:

If you compare the resolutions, it looks like this:

no matter which resolution is used

the proportions are the same

screens set at high resolutions simply compress the content more than screens set at low resolutions

the example above shows how much content will fit on the screen, not how the screen actually looks

the height is 3/4 of the

width

screens set at high resolutions are not necessarily physically bigger than screens set at low resolutions

if we place the same red image on each screen it will look like this:

However: the compression happens without loss of detail

At high resolution a screen simply has more pixels on it

If you looked at the high resolution page through a magnifying glass you would see that even though the content is compressed, it still has all the details from the low resolution page

Another way to put it isAnother way to put it is

an image viewed on a 30" monitor at a resolution of 1600x1200 pixel, looks exactly the same as an image seen on a 15" monitor set up to show 800x600 pixels

the width is pretty much the same no matter how the browser is set up

the height

varies a great deal

the actual height left for the webpage (the principal content) will vary, depending on which menus, buttons, etc. the user has activated

on a Windows 98 PC using MSIE 4.0 (version 4.72 to be precise):

• if only the menu bar is activated the web page gets full window size less 80 pixels• on the contrary, if all toolbars are activated the page gets full window size less 186 pixels.

MSIE = Microsoft Internet Explorer

Only menu bar activated (grey areas):

the EFFECT OFBROWSERS

the visual height of the web page is an elastic measurement

All toolbars and status bar activated (grey areas):

on low resolution screens, the toolbars may use close to 40% of the entire screen

on high resolution screens, they will use at most close to 20% of the screen

In either case, the number of In either case, the number of pixels used by toolbars, etc. ispixels used by toolbars, etc. is

186186

Therefore it is hard to make a fixed design with respect to

the visual height

The result simply varies - not only from users with different screen resolutions but also from users with the same resolutions but different browser setups.

while the height also

varies with the customization of

the browser

This means that the width of the screen only varies with the resolution

It is strongly recommended that none of the navigation tools are designed to be outside the visual area of the opening screen even in the worst case

Ergo: the navigation structure of the page should be kept at the upper 300 pixels of the page

(640x480 with all toolboxes activated)

actually the upper 294 pixels to be precise!

On a 640x480 screen with all toolboxes activated

All toolbars and status bar activated:

the number of pixels used by the number of pixels used by these toolbars, etc. isthese toolbars, etc. is

186186

the navigation structure of the page should be kept within the upper 300 pixels of the page

or the upper 294 pixels to be precise!

When designing pages you should therefore keep this division of the page in mind

The upper 300 pixels - and the rest !The upper 300 pixels of a webpage is often referred to as being above the fold

on a web page the above the fold area sells the rest of the page

All newspaper editors know the importance of what is kept above the fold - it's what sells papers

below, the above the fold area is shown using a lighter colour than the rest of the page

Conclusions• Webpages are printed on "elastic paper”

• Size of images and text varies depending on screen settings

• Positioning of images and text varies depending on screen settings

• Actual size of images and text depends on both screen settings & physical monitor size

• The same webpage looks different depending on the users’ monitor size and screen resolution

• Only the visual height varies with customization of browsers

• The visual width is less elastic than the visual height

But this is not the end!

When starting to build a new web site it is very tempting to add content to several pages right away

But many different aspects will influence the final look

it is almost impossible to take them into consideration once the pages are done in rough

find the right layout before you start adding content to your pages

the best way is to design an empty template page

Add all the tables and graphics

Write dummy texts etc, and stick to the dummies until the layout is perfect

Most important CONCLUSION

here we have been considering screen

resolution and browser set ups as well as the

dimensions of the common VDU

other physical

constraints maybe important in

determining some design issues

In Donald Norman’s chapter

“Design as Practiced”

in Winograd’s book“Bringing Design to Software”

the Apple Switch problem is examined and reviewed

Whilst examining this problem other considerations might be taken

into account

- the concept of a universal solutionto a problem

- is this really what we want?

THE APPLE MACINTOSH

differences to the PC: • usually a single box construction (no separate monitor)

• early use of icon-driven applications software

• software driven 3.5” disk ejection

An example of software/hardware confusion - it may be a software triggered disk eject but there are specialised circuits to the disk slot which implement shutdown and ejection

THE APPLE MACINTOSH

The problem:

all machines usually have an on/off button

nowadays, that on/off button is often a soft power down button

But then again, sometimes it is a HARD shutdown button

THE APPLE MACINTOSH

|

But then again, sometimes it is a HARD shutdown button

the Macintosh 610: 3.5” floppy disk slot

THE APPLE MACINTOSH

the Macintosh 610:

What was required:

“a simple and effective way for people to turn on their machine and to shut down or close safely all files, applications, queues and caches, and to turn off all power except for that required to monitor essential machine states”

THE APPLE MACINTOSH

the Macintosh 610:

Exceptional circumstances?

How to force a shutdown?

If there is NO shutdown button at all?

THE APPLE MACINTOSH

the SOLUTION:

ON/OFF button on the keyboard

Real power switch on the rear of the box

|

Design as Practiced

Donald Norman’s conclusion:

“When you are asked to solve a problem, look beyond it. Ask why that particular problem arose in the first place. Search beyond the technical: the business model, the organisational structure and the culture. The path to a solution seldom lies in the question as posed: that appears only when we are able to pose the right question.”

the meaningless button

Top Ten Mistakes in Web Design: May 1996

1. Using Frames

From Jakob Nielsen’s Alertbox: www.useit.com

2. Gratuitous Use of Bleeding-Edge Technology

3. Scrolling Text, Marquees, and Constantly Running Animations

4. Complex URLs

5. Orphan Pages

6. Long Scrolling Pages

7. Lack of Navigation Support

8. Non-Standard Link Colours

9. Outdated Information

10. Overly Long Download Times


1. Using Frames

•frames break the unified model of the Web • the user's screen view of information is now determined by a sequence of navigation rather than a single action• bookmarks may not get the same view back when followed at a later date•URLs stop working in that address information at the top of the browser no longer constitutes a complete specification of the information shown in the window

Many browsers cannot print framed pages appropriately

There may be trouble searching: search engines may not know what composites of frames to include as navigation units in their index


2. Gratuitous Use of Bleeding-Edge Technology

trying to attract users to your site by using the latest web technology will attract a few nerds, but mainstream users care more about useful content and good customer service

3. Scrolling Text, Marquees, and Constantly Running Animations

Moving images have an overpowering effect on the human peripheral vision - don’t try to emulate Trafalgar Square and constantly attack the human senses: give your user some peace and quiet to actually read the text!


4. Complex URLs

machine addresses, like URLs, shouldn’t be exposed, but they are. Some users decode URLs to infer the structure of web sites, probably because of a lack of support for navigation.

5. Orphan Pages

all pages need clear indications of what web site they belong to - they might be accessed without coming through the home page. Similarly, every page should have a link up to the home page and the structure of your information space.

So, use human-readable directory and file names that reflect the nature of the information space, minimize the risk of typos by using short names with all lower-case characters and no special characters, such as ~


6. Long Scrolling Pages

7. Lack of Navigation Support

At this time, only about 10% of users scrolled beyond the information that was visible on screen when a page came up, but with the advent of the roller on the mouse this has increased. However, it is wise to put all critical content and navigation options on the top part of the page.

Don't assume that users know as much about your site as you do - they need support in the form of a strong sense of structure and place, maybe a site map. Always let users know where they are, where they can go, and, perhaps, provide a search feature


8. Non-Standard Link Colours

9. Outdated Information

10. Overly Long Download Times

unseen links are blue; previously seen are purple or red -consistency is the key

most people would rather spend time creating new content than on maintenance, but maintenance can be a valuable way of enhancing website content

10 secs is usually seen as the maximum response time before users lose interest. On the web, users have been trained to endure so it may be acceptable to increase this limit to 15 secs for a few pages.


1. Breaking or SlowingDown the Back Button

“The "top ten" design mistakes I identified in 1996 are still bad for Web useability and are still found on many websites. So in that sense, not much has changed over the last three years.”

2. Opening New BrowserWindows

3. Non-Standard Use of GUI Widgets

4. Lack of Biographies 5. Lack of Archives

6. Moving Pages to New URLs

7. Headlines That Make No Sense Out of Context

8. Jumping at the Latest Internet Buzzword

9. Slow Server Response Times10. Anything That Looks Like Advertising

but “an entirely new class of mistakes” has arisen:

it is important to understand that the number of pixels is not related to the physical size of the...

Documents