JiscMail Logo
Email discussion lists for the UK Education and Research communities

Help for PHD-DESIGN Archives


PHD-DESIGN Archives

PHD-DESIGN Archives


PHD-DESIGN@JISCMAIL.AC.UK


View:

Message:

[

First

|

Previous

|

Next

|

Last

]

By Topic:

[

First

|

Previous

|

Next

|

Last

]

By Author:

[

First

|

Previous

|

Next

|

Last

]

Font:

Proportional Font

LISTSERV Archives

LISTSERV Archives

PHD-DESIGN Home

PHD-DESIGN Home

PHD-DESIGN  October 2011

PHD-DESIGN October 2011

Options

Subscribe or Unsubscribe

Subscribe or Unsubscribe

Log In

Log In

Get Password

Get Password

Subject:

Why website displays are not like paper displays

From:

Don Norman <[log in to unmask]>

Reply-To:

PhD-Design - This list is for discussion of PhD studies and related research in Design <[log in to unmask]>

Date:

Sun, 30 Oct 2011 08:34:13 -0700

Content-Type:

text/plain

Parts/Attachments:

Parts/Attachments

text/plain (235 lines)

I tried not to enter this debate (again). But I can't keep quiet.
There seems to be a lot of misunderstanding about the nature of the
design constraints for computers and phones and the differences
between the control one has on those domains versus on a printed page.

I am certain that this group includes numerous, excellent web
designers.  But others of you seem completely ignorant of the rather
horrid limitations of website design, but that hasn't stopped you from
making comments. There seems to be a huge confusion, believing that
traditional typographical design rules can apply directly to the web.

Experienced web designers: either stop reading now, or read it and
send in corrections or enhancements.

Let me try to explain some of those challenges. Designing websites for
the incredible variety of systems and displays and brands all with
different rules and languages, is a real design change. It is a
different world from paper.

The displayed page may look like a printed page, but consider these
facts. (Facts, not opinions).

The designer has no control over size, resolution, or color fidelity
of the device on which it is to be displayed. People read websites on
tiny phone and on huge screens: Take a look at Apple's largest
displays: huge.

On top of that, the user may make the window of the browser tiny or
large, narrow, or broad. Lines usually automatically adjust to the
browser width, hence little control over line length.

The display may be mounted in landscape or portrait mode. The screen
resolution varies dramatically (pixels/inch or cm). And pixels are
neither points nor ems.  The very same text displayed on a Macintosh
comes out a different size than on a Windows machine, even using the
same browser and display monitor.

Then we have different operating systems. About 5 versions of Windows
are still being used and maybe even more versions of the Mac OS.  Then
there are browsers, that do the rendering: there are three major
brands: Windows Explorer, Apple Safari and Google Chrome.  Each of
these has many different versions.

You do not know what fonts are available.


Implications: You can affect but not completely control:

* white space

* line length

* the font family being used (whatever font you specify in the HTML
code may not exist on the machine that is displaying the information).

* Kerning? Hah. forget about it. You can't even control the font
family or the spacing between lines or where the line breaks occur.

* The material to be displayed.

Example: this email.  Modern systems allow some control over
formatting through the use of HTML items such as lists (numbered,
bulleted, or just lists). Indentation. My email system lets me specify
font size as "small, medium, large").  Bold and italic font.  But List
Servers such as this one do not allow that.

I had to switch to "plain Text" in writing this, else my submission
gets rejected. Suddenly the font on my screen is tiny. I cannot change
it I have no idea how this will be displayed on your screen.
Moreover, i cannot change indentation, do underlines or bold or
italics. This is the world of design for the web.

Tell me again about my use of white space, kerning, and balance for
this email? My choice of font family? You have more control over how
my writing is to be displayed than I do, but neither of us has much
control.

 Learn a page display language, the most common (and required
standard) being HTML (HyperText Markup Language) plus the associated
scripts that attempt to specify the typographical components (CSS
scripts). There are many HTMLs, for each year new specs are added.
HTML5 is the latest.

NOTE. No vendor of browsers has ever implemented the official HTML
standard. Even though they take part in developing these standards,
they never implement all of them.  So something that renders well on
one browser may fail to show up on another.  (there are lots of good
(and BAD) technical and operational reasons for not fully developing
to the standard, but it causes real havoc.)  (The people from the
company who helped develop the standards are often powerless to get
the developers in their own company to adhere to them.)

There are also different standards for animation and dynamic text.
Many different tools. Flash is commonly used, but I predict it will
cease to exist. HTML5 now does some of what flash used to do. Adobe
(the developer of Flash) is now providing yet new tools (Edge, among
others) so that flash developers can still program in ActionScript,
but it compiles into HTML5.  (ActionScript is a time-based editing
language.)

Web developers have to learn many languages: HTML5, ActionScript, and
all the various specialized components of whatever tools they prefer
to use.  These languages are continually continually changing to keep
up with the developers' demands and the changes in technology. Just
keeping up to date is hard work.

Studies by my company (and many others) show that people look at and
read web pages very differently than they read printed documents. We
record eye movements, have people solve problems, watch people doing
their normal work, etc. Eye movement patterns are very different.
depending upon the task and very different on websites than on phones
than on paper catalogs or newspapers.

It is all very nice to say that websites should be evaluated by
printing them out, but that is not how we teach people to do it.
That is because real people use the web pages: they do not print them
out. Moreover the printout will not look like what is on a browser.

We teach that they have to evaluate websites on real monitors with
real OSs and browsers.

Any decent web producer has a battery of different machines and
displays. Websites are tested on a variety of combinations.  Even
then, it is impossible to test all the many weird configurations
people actually use, yet the goal is to make a website look good on
all of them.

(This is why Apple and Microsoft release their systems in "Beta": Even
though they have huge testing labs, they can only test realistically
if millions of people try and give feedback.  And even then, they
won't get al the configurations, which is why after an official
release, there will still be bugs and problems that have to be fixed
with patches.)

And much of the material is dynamic, tailored for the viewer:
advertisements, even articles. Photos. Editors expect to e able to add
or subtract photos by themselves into a template. They will change the
length of the captions and the text. Some systems automatically
compile text for each viewer. So how can you lay out something when
you don't know how many illustrations, or their size, or the size of
their legends, or the amount of text, or the sizes of headlines?

---

Today, it is about to get  better for the user and far worse for the
designer. The development of gesture-based phones and tablets has
caused every vendor -- Google, Apple, and Microsoft -- to bring out
entirely new ways of displaying material, changing the rules. Google
just brought out "Ice Cream Sandwich," their new OS that is quite
different from what is now on the market. Apple has  iOS5. Microsoft
is bringing out Windows 8, again a major, rather revolutionary
departure from existing systems.  Although Android and iPhone displays
look similar, Microsoft's new system looks very different.

All companies said "the very same application can run on a Computer, a
smart phone or a tablet."  (Google does not (yet?) make a computer.
They do make "Chrome," a cloud-based computer, but it uses their
Chrome browser to display everything, so one could think of it as a
tablet with bit in keyboard, that may or may not have a
touch-sensitive screen.)

Touch sensitive screens: suddenly the rule for targets -- the things
you click - change. Fingers are not a precise as a mouse pointer or a
stylus. So the screen design has to accommodate the fact that any
display might now be controlled by touch. So you can't have touchable
items close to one another -- and they must be big enough.   This
means, for example that you can't have a list, where someone just
points to the list item of interest: the finger point is not accurate
enough to select one word or one line out of normally-spaced type.

Each company's system is different than the others. So web developers
have to encode differently for the different OSs, and the different
browsers.

And although it is nice that the same apps might run on everything,
where everything uses touch and gesture (yes, even computers --
although they will still have a keyboard and mouse, except for Apple
where the mouse, I predict will be replaced by their touchpad).

And now the same information will have to be read on a tiny phone
screen (and the phone screens vary a lot in size), on tablets (where
they already come in many sizes. Apple has its touch and iPad. Android
tablets are made in 5", 7" and 10" (and others). Microsoft has yet to
enter the game but they are coming on strong: their new Windows 8
system for smart phones (think Nokia reborn), tablets, and computers
is very exciting: it is the best one out, I believe. (well, it isn't
quite out yet).

Getting legible type -- form size, contrast, and line length -- is a
real challenge.  But it can be done. Designers have some control, but
the design must figure out the size of the browser, the brand and
release of the browser and OS, and even the screen resolution and size
and display accordingly.   Lots of conditional statement.

Yes, a lot of this is automated. But when you see the results of the
automated systems you will cringe even more.
------
I don't do web design. I do interaction design. Actually, what i
really do is advise companies on who they have to hire  on where their
design team should be situated. On the need for multidisciplinary
teams, with designers usability experts, engineers, programmers, and
marketing all in the same room from day one. Where they are
co-located.  Central design studios are a disaster (as are central
marketing and central engineering). The people o a project have to
move to the project location.

Designing modern products is not a craft skill It is a complex mix of
disciplines each with its own powers and constraints. Often these
constrains are incompatible, which is why the teams have to be
co-located -- so they can work out a decent result.

This is hard work. Challenging. Fun.

It is about to get far worse in the attempt to make the end results
far more exciting and powerful.

In the startup companies i advise, if the people are not careful al
their resources are being used simply to keep their systems running on
the many varieties of Blackberries, iPhones, and Android phones out
there. So don't do it, i say. Design for just one phone: whichever is
your customer base. It used to be that this meant Blackberry for
business people and Android or iPhone for the others. iPhone used to
be the obvious choice, but now Android is used by more people than
iPhone, but it is much more difficult to design for because of the
variety of models.

So too with websites. And remember, people more and more view websites
on phones.

And people less and less print web pages.  Tablet viewing has replaced printing.
=====
Thank you for your patience

Don

Top of Message | Previous Page | Permalink

JiscMail Tools


RSS Feeds and Sharing


Advanced Options


Archives

April 2024
March 2024
February 2024
January 2024
December 2023
November 2023
October 2023
September 2023
August 2023
July 2023
June 2023
May 2023
April 2023
March 2023
February 2023
January 2023
December 2022
November 2022
October 2022
September 2022
August 2022
July 2022
June 2022
May 2022
April 2022
March 2022
February 2022
January 2022
December 2021
November 2021
October 2021
September 2021
August 2021
July 2021
June 2021
May 2021
April 2021
March 2021
February 2021
January 2021
December 2020
November 2020
October 2020
September 2020
August 2020
July 2020
June 2020
May 2020
April 2020
March 2020
February 2020
January 2020
December 2019
November 2019
October 2019
September 2019
August 2019
July 2019
June 2019
May 2019
April 2019
March 2019
February 2019
January 2019
December 2018
November 2018
October 2018
September 2018
August 2018
July 2018
June 2018
May 2018
April 2018
March 2018
February 2018
January 2018
December 2017
November 2017
October 2017
September 2017
August 2017
July 2017
June 2017
May 2017
April 2017
March 2017
February 2017
January 2017
December 2016
November 2016
October 2016
September 2016
August 2016
July 2016
June 2016
May 2016
April 2016
March 2016
February 2016
January 2016
December 2015
November 2015
October 2015
September 2015
August 2015
July 2015
June 2015
May 2015
April 2015
March 2015
February 2015
January 2015
December 2014
November 2014
October 2014
September 2014
August 2014
July 2014
June 2014
May 2014
April 2014
March 2014
February 2014
January 2014
December 2013
November 2013
October 2013
September 2013
August 2013
July 2013
June 2013
May 2013
April 2013
March 2013
February 2013
January 2013
December 2012
November 2012
October 2012
September 2012
August 2012
July 2012
June 2012
May 2012
April 2012
March 2012
February 2012
January 2012
December 2011
November 2011
October 2011
September 2011
August 2011
July 2011
June 2011
May 2011
April 2011
March 2011
February 2011
January 2011
December 2010
November 2010
October 2010
September 2010
August 2010
July 2010
June 2010
May 2010
April 2010
March 2010
February 2010
January 2010
December 2009
November 2009
October 2009
September 2009
August 2009
July 2009
June 2009
May 2009
April 2009
March 2009
February 2009
January 2009
December 2008
November 2008
October 2008
September 2008
August 2008
July 2008
June 2008
May 2008
April 2008
March 2008
February 2008
January 2008
December 2007
November 2007
October 2007
September 2007
August 2007
July 2007
June 2007
May 2007
April 2007
March 2007
February 2007
January 2007
2006
2005
2004
2003
2002
2001
2000
1999
1998


JiscMail is a Jisc service.

View our service policies at https://www.jiscmail.ac.uk/policyandsecurity/ and Jisc's privacy policy at https://www.jisc.ac.uk/website/privacy-notice

For help and support help@jisc.ac.uk

Secured by F-Secure Anti-Virus CataList Email List Search Powered by the LISTSERV Email List Manager