"Usability"

A

Andrew Cameron

I've written some sites in my time. I've written good sites, and I've
written very very bad sites. I have never, in the 8 years I'd had HTML as a
hobby, written a site as unreadable and badly-designed as "usability guru"
Jakob Nielsen's useit.com.

He makes some very good points in his articles, and they make a good read,
but I have seriously resorted to copying and pasting the text into Notepad
to prevent my eyes from bleeding. His site may indeed be one of the most
Lynx-friendly on the web, or very good with speech browsers, but it is the
most ugly, too. A big problem is his 100% width... oh, look, TABLE which
means that we get line lengths of a tiresome nature. This table "layout"
also brings us the navbar, which doesn't let us really navigate anywhere.

No page has the same links as another page - this makes the site confusing.
As I mentioned above, he uses tables for layout, which is less than
semantic. Another case of "do as I say...", I guess.
 
E

Edward Alfert

A big problem is his 100%
width... oh, look, TABLE which means that we get line lengths of a
tiresome nature.
<snip>

Good point,.. and my site also resizes to 100% no matter the width of the
browser.

Is there a way to set a maximum width without setting a minimum?

For example. I would like to be able to design my site so that it is not
wider than 800 but not force it to be 800. That way visitors with browsers
set to 600 width or other width (because they have not set the window to
full screen, or they are using webtv or some other browser with smaller
viewable area) do not have to scroll horizontally.

Is there such a possibility with HTML/CSS?
 
K

kayodeok

I've written some sites in my time. I've written good sites,
and I've written very very bad sites. I have never, in the 8
years I'd had HTML as a hobby, written a site as unreadable and
badly-designed as "usability guru" Jakob Nielsen's useit.com.

There was a contest to redesign Jakob's site; it was
called reuseit.

Hopefully Jakob will be redesigning his site soon...

Here's the URL for the contest:
http://www.builtforthefuture.com/reuseit/

And here's the list of the first ten winners:

http://www.mikepick.com/neilsen/
http://www.enginegraphics.net/portfolio/reuseit/
http://www.reh3.com/test/reUse/
http://www.vizi.nl/reuseit/
http://www.projetsurbain.com/projets/reuseit/iconic/
http://www.builtforthefuture.com/reuseit/entries/redux_reuseit_minimal_jakob/
http://www.didenhover.org/design/useit/
http://www.juleepearson.com/reuseit/
http://www.technetworks.co.uk/useitnice/index.html
http://www.ogston.com/reuseit/useitcleaned.html

My Favorite is Minimal Jakob:
http://www.builtforthefuture.com/reuseit/entries/redux_reuseit_minimal_jakob/
 
A

Andrew Cameron

D

David Dorward

Edward said:
Is there a way to set a maximum width without setting a minimum?

The CSS max-width property
For example. I would like to be able to design my site so that it is not
wider than 800 but not force it to be 800.

800 what? Pixels? That's not a very good choice of unit. Try something
relating to the font size, such as em - that way users get sensible line
lengths whatever size font they like to use.
 
S

Steve Pugh

Andrew Cameron said:
I've written some sites in my time. I've written good sites, and I've
written very very bad sites. I have never, in the 8 years I'd had HTML as a
hobby, written a site as unreadable and badly-designed as "usability guru"
Jakob Nielsen's useit.com.

I agree that it's a very plain site and it makes some design errors,
but the problems you highlight below are not amongst them.

It's also seems to me that his web site is rather low on Nielsen's
list of priorities at the moment. Reading his column over the past few
years has seen fewer and fewer interesting articles and more plugs for
reports to be purchased.
The design and coding of the site haven't changed in a long time,
which is both good and bad for various reasons. Indeed people have
even been inspired to redesign the bloomin' thing for him:
http://www.builtforthefuture.com/reuseit/
He makes some very good points in his articles, and they make a good read,
but I have seriously resorted to copying and pasting the text into Notepad
to prevent my eyes from bleeding.
A big problem is his 100% width... oh, look, TABLE which

Um, no. Apart from the home page, the table only contains the navbar
across the top. The content of the page is not contained inside a
table at all.
means that we get line lengths of a tiresome nature.

That's your fault not his.

If you have your browser window set to a certain size then you should
expect sites to fill that width.

I find it very hard to believe that cutting and pasting text into
Notepad is a better option than resizing your browser window, or if
you like having whitespace down the side of every page for some
reason, using a user stylesheet to restrict the width of the content.

In a decent browser (sorry not IE) a user stylesheet with rules such
as
body>p {max-width: 40em;}
will constrain the width of this and many other single column,
no-frills, sites without interfering in the display of more 'designed'
sites. (Add body>h1, body>ul, etc. to suit).
No page has the same links as another page - this makes the site confusing.

I don't find that at all. Every page except the home has a breadcrumb
trail at the top left (starting with a link back to the home page) and
a link to the search page at the top right. Links relevant to the page
contents go in the content or at the foot of the page. What else would
you add?

What I do feel is confusing is the way that many links lead off to the
Nielsen Norman Group web site with no warning. Because of the close
relationship between the content of the two sites it can seem that
there is just a single site with inconsistent styling.
As I mentioned above, he uses tables for layout, which is less than
semantic. Another case of "do as I say...", I guess.

Semantics and usability may sometimes walk hand in hand but they are
not the same thing. Nielsen is a usability expert and will advocate
the use of whatever tools makes a site the most usable, that may or
may not be the same as using tools which give correct semantics.

Steve
 
S

Steve Pugh

Edward Alfert said:
Is there a way to set a maximum width without setting a minimum?

For example. I would like to be able to design my site so that it is not
wider than 800 but not force it to be 800. That way visitors with browsers
set to 600 width or other width (because they have not set the window to
full screen, or they are using webtv or some other browser with smaller
viewable area) do not have to scroll horizontally.

Is there such a possibility with HTML/CSS?

There's the max-width property in CSS, but IE doesn't support it.

Steve
 
S

Steve Pugh

kayodeok said:
There was a contest to redesign Jakob's site; it was
called reuseit.

My Favorite is Minimal Jakob:
http://www.builtforthefuture.com/reuseit/entries/redux_reuseit_minimal_jakob/

Ooo, broken. The author assumes that everyone has their browser
background colour set to white.

Also runs foul of the IE bug with em-sized text. (Change the text size
to Largest and stand back...)

Nothing that couldn't be fixed in five minutes, but slightly the
judges giving it 5 out of 5 for accessibility and cross browser
compataibility indicates a certain lack of depth in the testing
process.

Steve
 
E

Edward Alfert

The CSS max-width property

Thanks. I'm on my way to research that property. It is easier to find out
how to do something when you know what that something is called. Thanks.

I just visited www.w3c.org (http://www.w3.org/Style/CSS/)to do some re-
learning, and what do I notice? They do the same thing that the OP
mentions is way wrong. They also resize to full screen and create very
long lines for reading.

Additionally, following the link provided by another poster, the top 10
winners of reuseit all design for 100% of the screen width.
http://www.builtforthefuture.com/reuseit/index.php#winners

Maybe it's the best compromise. Fill 100% of the screen but divide into
atleast 2 columns in order to break up line length. The problem is the
large difference in size between someone with a screen resolution of
640x480 and someone at 1600x1200. It is very hard to design something that
is 100% screen width and yet looks good at both ends of the spectrum.
800 what? Pixels? That's not a very good choice of unit. Try something
relating to the font size, such as em - that way users get sensible
line lengths whatever size font they like to use.

My mind still works in relation to pixels.

What do you do when you not only have text but also graphics. You have to
think in terms of pixels so that the images fit. For example: you have a
header with a background image and you want the image to fill the entire
width of your content.

I can see if you only have small images scattered throughout the page.
Then you would't have a problem designing around word line lengths since
you do not have to worry about image widths.
 
S

Steve R.

Steve Pugh wrote in message ...
There's the max-width property in CSS, but IE doesn't support it.

.... and with the majority of people viewing via 'IE', that's a darnation
pity :~(

.... but that's why tables are great for controlling width, specially when
percentage figures are used, not pixel widths :~)

Long live tables :~)
 
B

Barry Pearson

Edward Alfert wrote:
[snip]
What do you do when you not only have text but also graphics. You
have to think in terms of pixels so that the images fit. For
example: you have a header with a background image and you want the
image to fill the entire width of your content.
[snip]

You develop those graphics to suit the viewport sizes of your target audience.

Then you do as you say - make other things match them.

I personally currently make my photographs fit within 700 pixels x 500 pixels.
There isn't an ideal size. That is my best compromise.
 
B

Barry Pearson

Edward Alfert wrote:
[snip]
What do you do when you not only have text but also graphics. You
have to think in terms of pixels so that the images fit. For
example: you have a header with a background image and you want the
image to fill the entire width of your content.
[snip]

You develop those graphics to suit the viewport sizes of your target audience.

Then you do as you say - make other things match them.

I personally currently make my photographs fit within 700 pixels x 500 pixels.
There isn't an ideal size. That is my best compromise.
 
K

kayodeok

Ooo, broken. The author assumes that everyone has their browser
background colour set to white.

Also runs foul of the IE bug with em-sized text. (Change the
text size to Largest and stand back...)

Nothing that couldn't be fixed in five minutes, but slightly the
judges giving it 5 out of 5 for accessibility and cross browser
compataibility indicates a certain lack of depth in the testing
process.
Thanks for pointing this out; I didn't think to enlarge the font
though I was browsing with Firebird at the time. I have just
increased the font in Firebird, IE6 and Opera and I see what you
mean...I assume you are referring to the horizontal scrollbar?

It's still my favorite though but thanks for pointing out the IE bug
with em-sized text - I wasn't even aware of it (just as well I don't
use em/px for font-sizes then).
 
E

Edward Alfert

That's your fault not his.

If you have your browser window set to a certain size then you should
expect sites to fill that width.
<snip>

Sound reasonable... but it is very hard to education the world. It might
be simpler to adopt a sub-optimal solution in order to conform to 90% (my
guess) of visitors that browse with browser at full screen no matter what
resolution they have their desktop set for.
 
E

Edward Alfert

You develop those graphics to suit the viewport sizes of your target
audience.
<snip>

I guess I'll pick 800x600 and subtracting for common browser border. About
740 width?

I personally currently make my photographs fit within 700 pixels x 500
pixels. There isn't an ideal size. That is my best compromise.

They are all beautiful pictures... but somehow I was magically drawn to
"Glamour and figure". :)
 
A

Andrew Cameron

Steve said:
Um, no. Apart from the home page, the table only contains the navbar
across the top. The content of the page is not contained inside a
table at all.

Are you looking at a different useit.com to me?

<h1><span class="useem">use</span>it.com: Jakob Nielsen's Website</h1>
<table width="100%" cellpadding="12" cellspacing="0">
<tr>
<td width="50%" valign="top" bgcolor="#FFFFDD">
<h2>Permanent Content</h2>
....
</td>
<td width="50%" valign="top" bgcolor="#CCF6F6">
<h2>News</h2>
....
</td>
</tr>
That's your fault not his.

If you have your browser window set to a certain size then you should
expect sites to fill that width.

Designing to usability standards is about everyone being able to have the
browser, window size, personal style sheet and whatever else that they want,
and being able to view it in a pleasant way. I can't make a site for
1024x768 and then tell people using 800x600 that it's their fault for having
their resolution that small. Other sites manage to fill my browser and I
can read them just fine - sometimes I even *like* the design and think that
it's pretty.

If any old site can be perfectly readable in my browser (IE6, maximised at
1024x768 - yes, I'm in that 90%) than so should Jakob's. His choice of 100%
width combined with the colours do not make for pretty reading.
I find it very hard to believe that cutting and pasting text into Notepad

I meant Metapad (damned habits) - custom font and background colour set to
my easiest-to-read choices - the same settings I use to do anything from
long PHP coding down to a tiny bit of markup.
is a better option than resizing your browser window,

I shouldn't have to in order to make a site look good.
or if
you like having whitespace down the side of every page for some
reason, using a user stylesheet to restrict the width of the content.

Then this would mess up every other site on the net which manages to look
good at 100%.
In a decent browser (sorry not IE)

Well, that's kind of tough. Tell that to the millions of people who CANNOT
use a different browser (access and firewall issues at work, for example, or
people on slower machines) and they will just sigh and be forced not to view
your site. I'm currently building a web application and much as I hate the
idea, I'm having to design *for* IE5 and 6 since the router won't allow
anything else to access http.

Yes, it sucks, but that's just life ;-)
I don't find that at all. Every page except the home has a breadcrumb
trail at the top left (starting with a link back to the home page) and
a link to the search page at the top right. Links relevant to the page
contents go in the content or at the foot of the page. What else would
you add?

A constant menu somewhere else on the page that you can always go to, that
perhaps lists categories and within those you can browse further articles.
If I'm reading an article that I'm not interested in, am I going to want to
go to related links? Hell no, I want something different, but there's no
option there other than trawling through from the front page. I want to be
helped through the site since I am the visitor - I don't want to do all the
work myself.
Semantics and usability may sometimes walk hand in hand but they are
not the same thing. Nielsen is a usability expert and will advocate
the use of whatever tools makes a site the most usable, that may or
may not be the same as using tools which give correct semantics.

Semantics help heavily in good usability. Jakob's ideas are nothing
special, but he expresses them in a clear way - I just wish his site
followed his advice - it's not very usable at all.
 
S

Steve Pugh

Andrew Cameron said:
Are you looking at a different useit.com to me?

Clearly. Or maybe you're not reading what I wrote:
"Apart from the home page"
Designing to usability standards is about everyone being able to have the
browser, window size, personal style sheet and whatever else that they want,
and being able to view it in a pleasant way.

I agree 100%.
I can't make a site for
1024x768 and then tell people using 800x600 that it's their fault for having
their resolution that small.

Nor should you. Good web sites will adapt to both sizes.
Other sites manage to fill my browser and I
can read them just fine - sometimes I even *like* the design and think that
it's pretty.

So what is it about the text on useit.com that makes the text less
readable than the text on any other web site?
If the font size is the same (useit.com doesn't set a font size so
your browser uses your chosen size ) and the window size is the same
then the lines will be the same length, so why do you find these lines
more difficult to read?

Do you find my site at http://www.sfsfw.net/index.php equally hard to
read? It also doesn't specify a font size, uses the full width of the
window and uses black text on white. So is it equally hard to read?
If any old site can be perfectly readable in my browser (IE6, maximised at
1024x768 - yes, I'm in that 90%) than so should Jakob's. His choice of 100%
width combined with the colours do not make for pretty reading.

The colours are black on white (again with the exception of the home
page). As they're set in the CSS you can over ride them with your
browser defaults of turning off CSS, or by using a user stylesheet.
Most people find black on white acceptable to read, though black on
off-white is widely considered to be easier on the eye.
I shouldn't have to in order to make a site look good.

Exactly my point.
You should have already picked a window size that gives you sensible
line lengths.
But instead you have picked a window size that makes it difficult for
you to read the text.

If your preferred line lengths are 800px long and mine are 1200px long
and John Smith's are 400px long, what size should Nielsen force his
site to be?
Then this would mess up every other site on the net which manages to look
good at 100%.


Well, that's kind of tough.

Yes it is. But, IE is simply out of date.

In IE you need to do
p {width: 40em;}
which is much more likely to screw pages up, and as IE has a crap
interface which makes it hard to toggle
Tell that to the millions of people who CANNOT
use a different browser (access and firewall issues at work, for example, or
people on slower machines) and they will just sigh and be forced not to view
your site.

For most people, using a user stylesheet is not a requirement to view
any site. It's a convenience to make sites conform to _your_ viewing
preferences.

If a user _needs_ to use a user stylesheet (for example to compensate
for some disability) then they will use a browser that allows them to
do so. And if an employer prevents them then that employer may find
themselves at the wrong end of discrimination legislation.
A constant menu somewhere else on the page that you can always go to, that
perhaps lists categories and within those you can browse further articles.

Categorising the articles would be a good idea but that goes beyond
simple design issues. The related links given at the foot of most
articles go part of the way there.

As I said earlier Nielsen doesn't seem to put much effort into his
site and that sort of information architecture revamp, which as the
site has grown at a steady pace over the past eight years is a shame.

The sort of cross-referenced categorisation that I've done on
http://www.sfsfw.net/a/genre.php was only possible because I did it
from the very start.

Now that is something that we can lambast Nielsen for, failing to
forsee that his site might grow into a large resource and failing to
orgnaise the content with that growth in mind is a classic usability
gotcha.

Steve
 
S

Sam Hughes

I meant Metapad (damned habits) - custom font and background colour
set to my easiest-to-read choices - the same settings I use to do
anything from long PHP coding down to a tiny bit of markup.

Thanks for mentioning this piece of software. I looked on Google and
downloaded it; I love it!
 
S

Spartanicus

Andrew said:
A big problem is his 100% width... oh, look, TABLE which
means that we get line lengths of a tiresome nature.

Your problem, not the site's. The point of flexible design is that it
allows users to set a window width that *they* are comfortable with, the
site will fit into that width.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top