It's time to break out the design skills. I can't work on Felocity (directly), else I will finish my design before May 1 and be compelled to try and push it before I'm allowed to. And so, I turned my attention towards other sites. My friend and I enjoy talking about Anime Conventions and their web sites. Especially given the nature of an anime con, the web site is your primary point of contact with the individual. And yet, the designs are often week, lack power, and even break basic usability guidelines. Our conversation this evening was actually focused on Anime Expo web site. Between the flash intro and their front page, it took me more than 20 minutes to figure out where I was supposed to go to register. (I clicked on the only lit up icon, the blue girl in the middle, but I'll get to that in a minute.) I did however, swing by the contact form and let them know that there were some major functional problems with the web site.
But complaining doesn't accomplish much. You need more; no matter if it is ideas, examples, or even the raw code, you need something to show them, to explain what is wrong. And so was born the challenge from my friend. Redesign the Anime Expo web page without creating any new images. And so, here was the analysis of the problem, the proposed solution, and the means by which the final solution was achieved. At the end are some additional adjustments that would be great ideas to further improve the design if it were not for the requirement of using only the current image set.
!/media/2005/03/16-animeexpolayout/tn-animeexpoinitial.png(Anime Expo Initial Layout)!:http://felocity.org/media/2005/03/16-animeexpolayout/animeexpoinitial.png This is the page in its starting form. After watching the Flash intro (or clicking Skip Intro" you are brought to this page. From here, the user is at a loss of where to go next and will often times select the middle image since it looks like the only clickable thing. There are other links though, and this highlights Nielsen's article on "Mastery, Mystery, and Misery which reminds us all that there are guidelines we should follow in order to avoid forcing the user to explore the page. Unfortunately, the only color on the page is the blue box in the middle, which takes the user to a set of general information pages. From this section, it is impossible to navigate "down" to either of the other two areas. What other two areas? should be the next question. What you don't know is that the people to the left and right of the blue image are actually links to alternate pages. The left link is for Attendees, and the right link is for Exhibitors. Finally, while you can't see it, the news information in the top box is scrolling courtesy of some fancy DHTML. By this point, we have identified several major problems with the site on a usability level: * Navigation is not obvious, in fact, it is misleading. * Link Destinations are not clearly defined. (What does "Attendees" mean?) * The use of scrolling news distracts the user.
So then, it's time to look at some solutions. Probably the most important thing we can do at this point is label the three boxes. They need to say where they are going, and ideally should indicate what is in each area. There is no need for a user to roll over the image and guess what they are clicking on. The second thing we should do is work on eliminating the misleading issue where everyone clicks on the one link that has the highest percentage chance of lacking the information they need. Finally, if we can find a better way to present the news, that's icing on the cake.
The design could also stand some revision. The overall layout can be much tighter, and the color that exists should really be brought forward. No sense in making the convention seem dull and lacking liveliness. We should also bring our navigation forward to the top page, making it easier to find specific areas. The last major design element is to change the focus from the scrolling news to the areas themselves. Given the constraints of the challenge, the decision was made to lengthen the box used in the "over" state of the images and create a container box which would hold top level navigation for each section. A small sliver of the box was replicated a few dozen times over in order to stretch them to the correct length. The "news" box was squared off in order to be less distracting, and was reduced drastically in size. Finally, the whole layout was centered over itself in order to create a very powerful effect that sits above the Fold in most browsers.
!/media/2005/03/16-animeexpolayout/tn-animeexpofinal.png(Anime Expo Revised Layout)!:http://felocity.org/media/2005/03/16-animeexpolayout/animeexpofinal.png Here we can see the final layout. Ideally, the layout would be placed into a single center column with space on either side to grow and shrink. I'm still not terribly happy with the "news box" and it's color, since it feels out of place as the uncolored element. Also, it would be nicer if the width of the "border" on the grey news box would line up with the widths of the yellow and blue borders, but given the constraints, that was not an obtainable thing. A slightly more dynamic set of colors might have been helpful too. Working in the scope of blue, green, yellow when the primary logo is red provides it's own set of challenges and issues. I welcome any ideas and feedback from other people about additional things that can be done to further improve the layout.
Update (3/17/05 @ 18:11) I got a reply from Joyce Lim, director of the exhibits division of Anime Expo 2005. I took the time to craft a reply, explained (in greater detail) some of the more important problems with the design, and included the image I generated for this article as a reference. I've done most everything I can now, and we shall see if the site will reflect some of these changes or not.
In response to "Anime Expo Redesign With 0 New Images":
Jakobo > AX webmaster(s), X3.
I was so confused myself when I went to the site trying to get information about registering x_x;… (and vainly hoping online reg was up >>;...) I completely lucked out that I happened to click the right area by accident -_-;.
Anywho, there really should be more people like you in the world =3. Then most cons wouldn’t be run by fools on power trips =D. Not to mention sadistic webmasters who like to confuse visitors to the site ^_~;. Instead they’d be put on by people who ::gasp::! Actually might know what they’re doing =O! What a concept, XD.
::gives you a cookies AND a pixy stix =3::