Subject:
|
Re: New homepage for LUGNET part 2
|
Newsgroups:
|
lugnet.admin.suggestions
|
Date:
|
Tue, 5 Dec 2006 22:08:30 GMT
|
Viewed:
|
9672 times
|
| |
|
|
In lugnet.announce, Rene Hoffmeister wrote:
Rene:
Firstly, much thanks for all the hard work you’re putting into LUGNET, and into
working on modernizing the home page.
Prior to becoming a full time “LEGO guy”, I worked for 10 years in the internet
industry doing what’s often called “web usability” or “Human Experience
Design”... It’s making sure that sites are clear, approachable, and easy to use.
I’ve written a lot of usability analyses in the past few years, and as such,
they’re very much to-the-point. Because of this, what I have written below
might sound cold or insensitive if you read it the wrong way. Please understand
this isn’t the case... The whole reason I’ve taken the time to write what’s
below is because I want to help make sure folks love LUGNET.
There are many things I love about the new design (the better, brighter colors,
the addition of “new on brickshelf”, “latest moc” and “links”, and more.) Most
of all, the fact that you’re doing this!
So, the following is a list of items that, in my (former) :) professional
opinion, need revision. I have not presented design solutions for many of
them, but rather have simply pointed out issues that hopefully have easy
answers. But if you’re stumped, I’m happy to offer design advise. (Feel free
to email!)
Content arrangement: Priority
Firstly, it’s important to analyze how people are using LUGNET and to determine
which features are used most often. These features should be front-and-center
on the home page. For example, if you see in your web logs that a large
percentage of people use the search engine, the search box should be easier to
see. Right now, user content (NN posts) are the majority of the page. This
seems fitting, but equal consideration was not given to other NN related items,
such as the NN navigation (which falls below the scroll) or the search box.
Content arrangement: grouping
In general, the new design does not have a cohesive grouping of content. This
is needed, so visitors can easily find information. Here’s a list of the items
on the page...
1. Navigation
... a. Images/buttons across the top
... b. Text links at bottom
... c. Search
... d. Discussion / Forum navigation
... e. Popular newsgroups
... f. “Imprint” link
2. User content
... a. NN posts
... b. Brickshelf gallery
... c. latest MOC
3. Community news and resources
... a. Highlighted news (Welcome, PDX, Brickworld, etc)
... b. LUGmap
... c. “helpful links”
... d. Membership information
Some of these are grouped together, but many are not. Items should each be
logicially placed with each other. For example, “search” belongs near other
primary navigaton, like the primary navigation images for “Newsgroup”, “Guide”,
etc. New posts are not visually grouped with the names of the NN Groups. And
so on.
Perhaps it would make sense to have 1) an area of the page or heading called “In
the community” which contains the highlights, lug map, and helpful links, and 2)
and another called “What’s new” for the recent NN posts, most recent MOC, and
most recent Brickshelf gallery. (Side note: how about a “most recent on
MOCpages” ? ) :)
If you have the ability to detect whether a visitor is a LUGNET member, the
“welcome” and “membership” areas should be removed from the home page, and other
relevant content should be placed there instead. LUGNET caters mostly to
members and repeat-visitors, and as Kelly pointed out, this “valuable space” can
be better used to serve them.
Also, the three sections at the bottom of the page (“dream set”, “PDX”, and
BrickJournal 5”) are lost underneath the newsgroup postings. Once readers see
the ongoing scroll of news postings, they will assume that the remainder of the
page contains more similar posts.
Content: Consistency
Make sure you use terms consistently. For example, to new users, it’s not clear
that searching “sets” will search the LUGNET “guide”, or that “Top stories” are
“posts” from “newsgroups” (Newsgroups are also called “groups”, “forum”, and
“discussion” on the page). It’s OK to use varied terms if folks use the varied
terms themselves, but they should not be used interchangably. Decide which noun
you would like to use “officially”, and only elaborate with other synonymous
nouns where appropriate.
Interactivity: Hiding content
Somehow, I managed to “collapse” a post to just the heading and meta
information. It’s problematic that I don’t know how (or can’t seem to expand it
other than mousing over) but beyond that, this feature does not serve any useful
purpose. Because the page loads with all the content already expanded, no user
would opt to collapse content they can already see, when they can simply scroll
past it or ignore it.
When implemented correctly, a DHTML show/hide can be a very powerful way to
include a lot of information on a page without causing visual clutter. On
http://news.yahoo.com/ (Scroll to “Top Stories”) the links for “AP”,
“Reuters”, “AFP” (etc) do this very well. Yahoo also has implemented this on
their home page (http://www.yahoo.com) as tabs, and more interestingly, as
buttons for Mail, Weather, etc.
Navigation
Navigation is very, very important... espescially on a site as varied and as
large as LUGNET. I’m sure you wrestle with how to steer the vast newsgroup
visitors to the forums easily, without losing the important community and
reference features that LUGNET provides. Right now, though, the links for the
various tools and content are a bit scattered in the top and left navigation
areas.
The search box is hard to find for something that I would guess is used very
frequently. Commonly expected places are the immediate upper right or the
center. (And even better if it’s always in the same place on all pages.) Also,
The search box can be simpilfied: The added text “Search for” and “Search in”
is not needed. Horizontally, 1) the select box, 2) the query textbox, and 3) a
“search” button, in that order, will suffice. If you opt to add a heading that
says “Search” above the form, the search button can be shorted to “go”. When
vertical, the text box should come before the select box, as you have done here.
I am glad that, since most search is for news posts, it now pre-populates with
“News” instead of “Sets”.
The word “imprint” in the upper right corner seems both visually out-of-place as
well as contextually odd. What does this word mean here? It appears to link to
contact information. Perhaps “Contact LUGNET” would be better.
Navigation: Links
Links should either be 1) underlined, 2) a color very different than the body
text, or ideally 3) both. The best option is #3, followed by #2. But if
they’re just underlined body-colored text, they do not contrast enough with
surrounding content to be noticed. People navigate 99% by clicking links, so
they should be easy to find.
As a rule, the link color should be the same for all links on a page. (Except
of course, visited links should be a different color.) Right now, some links
are dark blue (side areas), others are bright blue. While there are exceptions
to this rule of thumb, I don’t think that they’re valid for a page like this.
Another rule of thumb is that the color you use for links should not be used
anywhere else. This has the added benefit of making images easily recognized as
clickable by adding the link-color to the images. Unfortunately, many designers
like to “re-use” the link color for section headings or dividers... but this
only lessens the ability to easily identify links.
Non-underlined-text should never be a link. (I was very startled when I clicked
in “dead space” to bring my brower forward, and it activated a link. After
another try I realized it was because clicking anywhere in a post’s content
acted as a link. I understand this makes the post easier to aim for with your
mouse, but that’s only if a user knows about this functionality, which they
could only ever discover by accident. People expect to interact with text in
one way, and links another.
When mousing over links and link-images, the cursor should change. Browsers do
this by default, but somehow you have overridden this. (I did not know I could
click on images that were in fact links until well into this analysis.) Making
images links is very good, because it increases the physical area that users can
aim for and thus make the page easier to use... but that’s only if they know the
image is a link!
Visual: Logo
Logos are designed to be placed on solid backgrounds and to have a certain
amount of “padding” around them, where no other graphics, text, or page boundry
entrudes on them. The “padding” can either be white, or one of several
predefined colors. Generally, this padding is equal to the height of a letter
from the logo.
The logo on the existing home page seems to obey this convention. The “image
only” version of the logo (called the “bug”) that is used in the LUGNET buttons,
the LUGNET news “speech bubble” and other places, seems to have a more tightly
cropped appearance. But if you look at the bug, there is still a uniform and
consistent amount of padding around it.
Right now, the logo is very close to the screen edge, and has a line running
through it. You should consider adding a solid background behind the LUGNET
logo (white, or one of the two blue colors) and adding padding equal to the
height of the “L” around it.
Take a look at the existing home page and the /admin/logo/buttons/ images for
visual reference.
Visual: Spacing
Boxes that contain content and navigation seem too tightly cropped to their
content, yet white space between these areas is very large. Consider adding
some padding to these boxes, and reducing the amount of whitespace between them.
Spacing is also important between items of differing nature. Notice how, in
this post, my headings have two line breaks before them, but one line break
after them. This places them closer to the content that they describe. Because
the NN posts are so close to each other, the post title the same distance to
itself as it is to the post above.
Visual: Contrast
There is not enough contrast on the page. When you want text to stand out, you
should change two or more of the following: 1) Size, 2) color, 3) Style, 4)
Spacing. (The more the better!) For example, the headings “PDX”,
“Brickworld”, etc) do a good job of contrasting in size, spacing, and style
(bold). But the NN post headings do not stand out, because only the style is
different (caps).
The color used to draw boxes around the posts does not contrast well with the
text. (It looks to be the same color.) This makes the page feel busy or
cluttered. Consider using 1) a (very!) light outline to make the text stand
out, or a (somewhat) light text color, to make the sections stand out.
For text, less-important (but useful) content can be shown in a smaller font or
in lighter text. There’s a lot of meta information in NN posts, for example,
such as date or group name that can be reduced visually to cause less clutter.
It’s still there for those that want to read it, but it allows you to focus on
the more important content, like the subject, author, and message. On MOCpages,
I change size, weight, and color for meta information on reviews, MOC lists,
etc. (Examples, http://www.mocpages.com/moc.php/24751#reviews,
http://www.mocpages.com/recent.php?start=17, )
Visual: Icons
There are a lot of folks in the LEGO community with artistic training that would
probably be happy to create icons and images for the various buttons, headings,
and images on this page. Why not have a contest or ask for volunteers?
Ironically, the new icons here look old fashioned and worn.
It’s hard to add color on a LEGO site. As a designer, you want the page to be
fun and lively (because.. it’s LEGO!) :) But a lot of color causes visual
clutter. The two photos of LEGO creations, which add lots of color also. The
folks on http://www.zemi.net/ did a great job keeping their site LEGO-fun,
colorful, but not cluttered. Sites like http://www.brickish.co.uk and
http://www.brickset.com also do a very good job adding some color while
keeping a clean appearance. On
http://www.seankenney.com
I’ve tried to let the photos of LEGO creations be the only colorful things at
all (except links) so that they remain the focus.
When the page first loaded, the first thing I saw were the colorful graphics
next to each post that seemingly jump off the page at you. The next thing was
the colorful graphics atop the page (and the logo.) Then I saw the big headings
for Welcome and Brickworld, and began a more normal content exploration. That
meant my eyes traced a big “M” motion across the page.
This fights the natural urge we have to trace an “F” across the page, where
people look at the upper left, then across the mast, and then downwards and
across, then downwards completely. this is how we read books and skim
content, and the page layout and its visuals should be designed accordingly.
....
Rene, by all means, e-mail me if you’d like. And understand that all that I’ve
said here has been in a gentle “tone”. :)
Sean
- - - - -
Sean Kenney
sean@mocpages
MOCpages Admin
|
|
Message has 1 Reply:
Message is in Reply To:
16 Messages in This Thread:
 
 
- Entire Thread on One Page:
- Nested:
All | Brief | Compact | Dots
Linear:
All | Brief | Compact
This Message and its Replies on One Page:
- Nested:
All | Brief | Compact | Dots
Linear:
All | Brief | Compact
|
|
|
|
