design question - what makes a page of options clear for the user?

[lawrence]

We (publicpen.com) are designing a new weblogging service, similar to
Typepad. Our graphic designers (Misty Vredenburg and Peter Agelasto)
are currently doing multiple design mock-ups of possible control
panels. These would be the panels you arrive after you, the owner of
the website, log into your secret, password-protected control-page. We
are trying to figure out what visual arrangement makes the options the
most clear.

None of the links work yet, but if you can guess their meaning from
their arrangement on the page, and the words that were choosen for
them, then our designers must be doing something right.

Comments welcome. One design can be seen here:

http://www.publicdomainsoftware.org/index.php?pageId=389




and here is another:

http://www.monkeyclaus.org/index.php?pageId=662

 

[Whitecrest]

We (publicpen.com) are designing a new weblogging service, similar to
Typepad. Our graphic designers (Misty Vredenburg and Peter Agelasto)
are currently doing multiple design mock-ups of possible control
panels. These would be the panels you arrive after you, the owner of
the website, log into your secret, password-protected control-page. We
are trying to figure out what visual arrangement makes the options the
most clear.
None of the links work yet, but if you can guess their meaning from
their arrangement on the page, and the words that were choosen for
them, then our designers must be doing something right.
Comments welcome. One design can be seen here:
http://www.publicdomainsoftware.org/index.php?pageId=389
and here is another:
http://www.monkeyclaus.org/index.php?pageId=662

Well I guess you could make them a little more plain if you really
tried. If this is the best your graphic designers can come up with, you
might want to look for different talent.

 

[Toby A Inkster]

http://www.publicdomainsoftware.org/index.php?pageId=389
http://www.monkeyclaus.org/index.php?pageId=662

See this message (excluding the last paragraph).
http://groups.google.com/[email protected]

 

[Talc Ta Matt]

You've got a lot crammed onto one page. If I were doing this I'd get some of
that stuff onto the sub pages.

For instance, there's no reason to have all those management things on there.

Just say...

WEBLOG ENTRY
new entry, manage old entries

FILES
upload, manage

IMAGES
upload, manage

Then of course on the manage pages you'd have options for specific things.

 

[lawrence]

Well I guess you could make them a little more plain if you really
tried. If this is the best your graphic designers can come up with, you
might want to look for different talent.

I appreciate all the responses on this thread. The design with a lot
of options is meant to test the theory that users infer meaning from
context. It's an idea that both Edward Tufte and Jakob Nielsen have
pushed. The other design was scrapped and the designer started over
again with something different:

http://www.publicdomainsoftware.org/index.php?pageId=398

 

[PeterMcC]

I appreciate all the responses on this thread. The design with a lot
of options is meant to test the theory that users infer meaning from
context. It's an idea that both Edward Tufte and Jakob Nielsen have
pushed.

If the above is your theorising, my apologies for any offence in the
following; however, if it is the underlying principal that the designers are
claiming is driving their work, they're talking tendentious nonsense. There
is no "theory" being "tested" - that meaning is in part derived from context
has been established beyond any doubt for some considerable time.

I may be missing something but the designs that have been suggested look to
be largely artless and unattractive - sold as a good thing because they are
at the cutting edge of some supposedly radical concept about meaning and
context. I'd be inclined to get the designers to re-examine some of the less
radical notions - form and function looks like a good place to start.

 

[lawrence]

If the above is your theorising, my apologies for any offence in the
following; however, if it is the underlying principal that the designers are
claiming is driving their work, they're talking tendentious nonsense. There
is no "theory" being "tested" - that meaning is in part derived from context
has been established beyond any doubt for some considerable time.

I may be missing something but the designs that have been suggested look to
be largely artless and unattractive - sold as a good thing because they are
at the cutting edge of some supposedly radical concept about meaning and
context. I'd be inclined to get the designers to re-examine some of the less
radical notions - form and function looks like a good place to start.

Thanks much for your feedback. Your remark is similar to my own
concern, but I'm glad that I won't have to say that to them. I'll
forward your critique to them. My main concern is that neither design
has gone far down its road. For the user test to be much of a test, we
need two really different designs that clearly make different
assumptions about how users interact with a computer screen. I'd like
one design to be to super-heavy with options, and the other design to
have only, at most, 3 options on the screen at a time. And then we can
watch the users interact, and see if they prefer the design that hits
them with all the options at once, or the design that protects them
from that complexity. And so far, neither of these designs go very far
in the direction they are supposed to go.

 

[lawrence]

By the way, I encourage you to leave your remarks over on those pages,
rather than here. Both pages have the comments function enabled.
However, I do also ask that you tone it down it a bit. Several of the
replies so far have been agressive and hostile. We're looking for
advice, not beligerence. Keep it useful and constructive or please,
please, please don't post.

We begin testing next week so then our opinions will meet reality. The
test will include these two designs, plus the design that TypePad is
using for their service (we've purchased an account on TypePad so our
users can login and post a real weblog entry to the web, using Ben and
Mena Trott's service).

Obviously we are hoping that, in the end, we will come up with a
design that is cleaner and clearer than TypePad. We will keep
listening to user feedback and modifying things accordingly until we
reach that level. By the way, has anyone here used TypePad, and if so,
what do you think of the service?

We also hope that people who've used PostNuke will look at our control
panel and consider our's better. Of course, this won't be very
difficult to acheive.

 

[lawrence]

Well I guess you could make them a little more plain if you really
tried. If this is the best your graphic designers can come up with, you
might want to look for different talent.

As to the plainness, I was personally inspired the extreme minimalism
of Phillip Greenspun's early ArsDigita system:

http://philip.greenspun.com/register/index?return_url=/shared/community-member.tcl?user_id=6066

Nothing but a little black text on a white background. However, both
of the graphic designers on the team were horrified with the idea of
taking minimalism to such an extreme, and also they made the
reasonable point that the link structure in Greenspun's system is
damned confusing. However, it was another design dimension along which
the designers were supposed to split (and so far have done so to any
significant degree), and I hope they will. The blue/white design is
supposed to be quite minimalist, the other design, is supposed to, in
the end, have a lot of flash and javascript.

Of course, in the end, whatever the users like is what will go with.
The idea is simply to come up with two very different designs, so we
can see which way users lean. If we had the resources we would test 4
designs, and thus test each combination on the two dimensions we
mentioned so far (complexity verus simplicity of choices, and
minimalism versus flashiness).

The blue/white design is pretty much in final form. The other design
has morphed a great deal. I think we'll have another version out by
late Sunday night. It might be worth checking on it then.

Again, I appreciate the feedback.

 

[lawrence]

See this message (excluding the last paragraph).

This site suffers from the
i've-heard-that-the-font-tag-is-evil-and-div-and-
span-are-better-so-i'll-use-nothing-but-div-and-span syndrome.
Actually, I've found that it is not necessary to use span tags. If you
give a div tag a class, and then in the style sheet you go like this
to the class:

display:inline;

Then the div will behave exactly like a span. So you can build
webpages with nothing by the A tag and creative use of the div tag. It
simplifies the toolset you have to work with, with the benefits that a
carpenter might understand, if the carpenter had to walk around all
day with 5 different hammers in his belt, but then one day discovered
a magic hammer that could take on any shape and do anything he wanted.
So then, instead of 5 hammers, he could use just one, and his life is
made that much more simple.

However, if its true that both designs are made of nothing but a,div,
and span tags, then I'm surprised, because one of our designers does
all his work in Dreamweaver, and I'm under the impression that
Dreamweaver uses the full range of HTML 4.0 tags in the markup that it
creates.

 

[Toby A Inkster]

Actually, I've found that it is not necessary to use span tags.

Um. Me thinks you're missing the point.

So you can build
webpages with nothing by the A tag and creative use of the div tag. It
simplifies the toolset you have to work with, with the benefits that a
carpenter might understand, if the carpenter had to walk around all
day with 5 different hammers in his belt, but then one day discovered
a magic hammer that could take on any shape and do anything he wanted.
So then, instead of 5 hammers, he could use just one, and his life is
made that much more simple.

Yes, but <div> is *not* a magic hammer. It's an ordinary hammer.

Consider a Swiss watch maker, crafting delicate timepieces using a variety
of intricate tools.

Now take away his tools and give him a single hammer.

Is he going to build watches with the hammer? No, he's going to cave your
skull in to get his tools back!

However, if its true that both designs are made of nothing but a,div,
and span tags, then I'm surprised

**If**??? You mean you haven't even **looked** at them?

 

[Isofarro]

Then the div will behave exactly like a span. So you can build
webpages with nothing by the A tag and creative use of the div tag. It
simplifies the toolset you have to work with,

At the considerable cost of having a non existant structure. There are good
reasons to identify headers, paragraphs, lists and sections using proper
HTML elements. Using just divs and anchors is pointless to the extreme.

and I'm under the impression that
Dreamweaver uses the full range of HTML 4.0 tags in the markup that it
creates.

Who authors pages, the tool or the user? If the user isn't using the range
of HTML elements, the tool isn't at fault.

 

[lawrence]

**If**??? You mean you haven't even **looked** at them?

Sure, we've spent hours talking about them, in house, but I don't
think I've looked at the source code on them. They are changing fast
and it is pointless to try to keep up with day-to-day changes.
Besides, if you know a page was made with Dreamweaver, then what is
the point of looking at the source code? Isn't all Dreamweaver code
pretty much the same?

I thought your remarks about the Swiss Watch maker needing a wide
array of tools was very interesting, so I sent it to both designers.
Of course it'll be pure-Greek to the fellow who designs only in
Dreamweaver - he doesn't know how to hand code. The other woman might
find it interesting.

I really do appreciate your feedback, however, mostly, on this forum
I'm looking for feedback about the clarity of the options, not the way
the HTML tags are written.

 

[lawrence]

At the considerable cost of having a non existant structure. There are good
reasons to identify headers, paragraphs, lists and sections using proper
HTML elements. Using just divs and anchors is pointless to the extreme.


Who authors pages, the tool or the user? If the user isn't using the range
of HTML elements, the tool isn't at fault.

I appreciate the feedback, but surely there are a lot of designers out
there who use Dreamweaver or Frontpage exclusively?

Anyway, we are under a very tight deadline, so there may not be time
for the person in question to learn a new set of skills. Though, of
course, every project allows a person to learn new skills.

But somehow this conversation has gone off track. We're now talking
about HTML markup. Does anyone have an insight to offer regarding the
clarity, or lack thereof, of the designs?

 

[lawrence]

At the considerable cost of having a non existant structure. There are good
reasons to identify headers, paragraphs, lists and sections using proper
HTML elements. Using just divs and anchors is pointless to the extreme.

She wrote me back: "Yes... and what is the good reason? the structure
is obviously not nonexistant - the japge renders."

I think that about sums up my view. XML has semantics, HTML doesn't.
When dealing with HTML, as long as the page renders across all
platforms (we test IE and Netscape on PCs and Macs, and Netscape on
Linux) then that seems to be good enough, yes?

 

[Mark Parnell]

Sometime around 13 Oct 2003 20:58:02 -0700, lawrence is reported to have
stated:

I appreciate the feedback, but surely there are a lot of designers out
there who use Dreamweaver or Frontpage exclusively?

No, that's *deezyners*. ;-) But you are missing the point. The tool is
irrelevant (to a large extent, anyway). It is the ability of the user that
matters. Someone who knows what they are doing can make a better site in
Notepad than someone who doesn't know what they are doing who happens to be
using DW, and vice-versa.

But somehow this conversation has gone off track. We're now talking
about HTML markup.

What do you expect, in alt.html?
^^^^

 

[Mark Parnell]

Sometime around 13 Oct 2003 21:03:11 -0700, lawrence is reported to have
stated:

I think that about sums up my view. XML has semantics, HTML doesn't.

Are we talking about the same HTML here? HTML is a _Markup Language_. It
describes the structure of the document. If text is a heading, why not
mark it up as a heading? If it is a list, why not mark it up as a list?
And so on, and so forth. If you aren't going to do that, then you may as
well just write it in plain text.

When dealing with HTML, as long as the page renders across all
platforms (we test IE and Netscape on PCs and Macs, and Netscape on
Linux) then that seems to be good enough, yes?

Taking headings as a specific example, there are various browsers which
allow the user to get a kind of "document outline" from a page, using the
headings on the page.

 

[Toby A Inkster]

XML has semantics, HTML doesn't.

Quite the opposite actually. How could anyone interpret the semantics of
the following well-formed XML snippet?

<flibble>
<foo f="John" x="Steve" />
<foo d="Chas" f="Dave" />
<bar zibble="zonk">
Potato<baz />Celery<baz />&russian;
</bar>
</flibble>

There is simply no way to make any sense of it, unless you know what the
elements flibble, foo, bar and baz mean, and what their attributes mean.

You might be able to infer some meaning if you had access to the DTD, but
that is certainly not guaranteed.

On the other hand...

<body>
<img src="John" alt="Steve" />
<img id="Chas" src="Dave" />
<p id="zonk">
Potato<br />Celery<br />&Pi;
</p>
</body>

.... has a well defined meaning: any browser worth ots salt could tell you
that "Dave" is the URL from which it may load an image; <br /> should
cause a line break; if "John" can't be displayed, that it should display
the text "Steve" instead.

HTML has semantics, XML sometimes does.

 

[Toby A Inkster]

I really do appreciate your feedback, however, mostly, on this forum
I'm looking for feedback about the clarity of the options, not the way
the HTML tags are written.

But the way the HTML tags are written *effects* the clarity.

If you use <div style="font-size:200%;"> to mark up a heading, then it is
not clear where the headings are when viewed in any non-CSS browser.

 

[Steve Pugh]

I think that about sums up my view. XML has semantics, HTML doesn't.

LOL

You're 100% wrong.

HTML is nothing but semantics.

When dealing with HTML, as long as the page renders across all
platforms (we test IE and Netscape on PCs and Macs, and Netscape on
Linux) then that seems to be good enough, yes?

What about Google? Lynx? Jaws? Home Page Reader?

Steve