Layout: ease of navigation - what makes sense to the user?started by Lawrence_krubner on Jun 20, 2004 — RSS Feed
Myself and two friends have been working on some weblog software. We need some intelligent people to go and check it out and give us some intelligent feedback about it. The issue to be decided is, what is the best way to present a list of options to the user? When you've got a lot of information to convey, what is the best strategy to convey it? Should all options be on one page, should they be out in the open, should they be in drop down boxes, should they be on DIV tags that only become visible on a click, or what?
The three of us have had some long talks about this. Following the ideas of the design guru Edward Tufte, we first tried to put all options on a single page - but most people who looked at that page felt it was overwhelming. We've since hid all the options in some invisible DIVs, they become visible if you click the "Full options mode" link. What we call "Simple Mode" is now the default.
But is it simple enough? There are still 30 links on the page. Can we make it simpler? If any of you have some spare time to invest in this, and offer an intelligent critique, it would mean a lot to us. (It's a very open source give-to-the-public project so you'll be helping a good cause.)
As I said, this is weblog/website software. The idea is that you, the website owner, should be able to run your website even though you don't know a thing about HTML. Maybe you'll hire a professional web designer to come up with an initial design, which you'll then use as the template for your site, but after their job is done, you, the website owner, need a way to change the text and post new images. Or maybe you just want a weblog.
That's the gist of what were trying to get across.
We put up a demo site so people can kick it around and give us some feedback, we've put up a demo page. Feel free to post new pages, or edit old ones.
The secret control panel is here:
You'll need a username and password to get in:
Lawrence, I had a look at your blog software but got lost very quickly. I can't really comment on how well the software works - because I was baffled from square one.
The first problem - I didn't know what to expect. I have no experience with blogs or any other automatic page building. What does it do? what can it not do? Why should I use it? You have a list of buttons but what they mean or why I need to use them or in which order, i just don't know.
One of the basic principles of communication is...
1. tell them what you are going to tell them
2. tell them
3. tell them what you have told them
You can see this at work in any decent manual or instructional book.
Even the most complex tasks can be explained - if you do it right. From my experience, software engineers are not very good at explaining things because they are too close to the project and assume too much knowledge that they then take for granted. Those words you use everyday don't mean anything to people outside your area. Use plain English. Have an easily accessible glossary of terms for anything that is remotely technical.
You say that your software is for people who don't know HTML, so you have to assume that they are going to have to be told a lot - and equally, there is a lot of stuff they don't need to be told and should be left out. Why mention RSS and XML??? If you get this fine balance wrong, you get a very confused user.
The 'classic' method of approaching such problems is to use a 'wizard' where the only options for each step is to go forward, backwards or cancel. So, rather than have a menu, you explain what is going to happen and just have a 'start' button. Take the user though the process step by step and don't allow deviations from the path until they understand the consequences.
Feedback. Let them see the consequences of each step and explain the options that they can try next time. Give lots of examples.
When they have built a few pages this way, then you can introduce a menu that gives fuller control.
Another thing that has occurred to me is that you are doing your reseach in the wrong place. The web designers on this forum are probably not the audience you say the program is aimed at. Ask people who 'don't know a thing about HTML' and you will get more valuable feedback.
I havn't looked at it, but from the description of lot's of links on one page, the minimum you should do is categorise them?
Are they well grouped by task or type? and are the groups clearly defined visually?
Is it easily evident what the groups are and easy to know with group the link you are looking for is under (when you are new to the system)?
I took a look at your site and have a few comments that I would like to add to the conversation.
1. I would suggest that a few examples be provided. It is hard for web developers to get past the blank page syndrome.
It may be helpful to take the tutorials a little further by providing a story line or "quest for the user to follow when developing their first site/journal. For example: When I teach my students how to develop their first multimedia lesson I have them follow a very scripted set of guidelines. To see what I am talking about point your browser to http://midsolutions.org/webquest/webquest_index.htm for an overview of the project or to http://midsolutions.org/webquest/mapping.htm for the design guidelines. It might be helpful to see how Blogger (http://www.blogger.com/start) and Movabletype (http://www.movabletype.org/help/) approach educating users.
2. The menus are a little overwhelming. There are two ways of handing this situation that I would suggest be investigated: 1) Drop-down menus – in Eric Meyer’s latest book he provides a tutorial on designing dropdown menus with css only (http://more.ericmeyeroncss.com/), there are also several very good menu management systems listed on A List Apart (http://www.alistapart.com/). 2) There was a nice model developed by Aaron Gustafson in his article “Let them eat cake” that use a small amount of java script to chunk data into manageable bites.
Firstly get rid of that floating menu on the left - they never move smoothly enough to avoid annoying everyone.
Secondly, there's nothing wrong with having many links on a page as long as their purpose is clear and they are grouped with clear headings. I have no idea what some of the links on that page do. I'd use a table layout with one link per row along with a cell containing a description of what the link does. For example, in 'full mode' there are options for 'designs' and for 'templates' - what is the difference? And what is an 'arrangement'?
Your headings are pretty good, but they could be less aggressive (ie. less like 'Pay us for web hosting' on your homepage) and in some cases more concise ('Get stuff out of the trash').
Thirdly, it's helpful if things are consistent: the four 'edit' links are written four different ways ('Edit: 15', 'Edit: 3 Entries', 'Edit 2', 'Edit - 0') which is terribly confusing. If it's written differently, users will think it does something different.
Fourthly, I'd avoid the whole 'simple'/'full mode' idea altogether. A better way would be to have one page with just headings ('Templates', 'Arrangements', 'Weblog Entries' etc) which then link to other pages with only the controls for that category. For example you could click on 'Manage Images' on the main page which then links to another page with all the links for images.
Fifthly, although I'm fond of default-link-blue, try styling the page a bit more - add some line spacing for a start.
Ultimately, I think you've come up with a solid web app - it's just the design that's letting you down a bit.
From looking at the control panel I would say forget the features, and think of things from a users experience of the app.
What does a user want to do?
If you divide it up into an understandable hierachy of tasks (take a look at the windows xp user account applet, it makes it simple and easy to manage users. Its good to compare that to the more advanced interface you get on say the professional or server versions).
I think the simple and advanced options are a good idea but again keep it consistent with the simple interface, i.e the groupings should really match.
I agree with the earlier comment on the lefthand menu. Go for a static menu, theres good reasons why all the big sites use them
Good luck with further development.
i took a brief look and i'm think'n i can help you out in several areas one step at a time. i think it's great that you guys are working on the project as a team - discussing ideas, concepts, how to stuff ect.
A while back I also wanted to do a blog progam of sorts and what I ended up with I call Creative Web Expressions. U can see what I did on denverdeals.com Free Web Pages. Similar to what you guys are going thru, there were serveral issues that I had to make decisions on, eg. how do I give access to users to create and edit a web page, how do i present a list of created pages to all, etc...
One thing that I hope you find unique about my editor is the way in which I handle up loading pictures... Give this a try and you'll understand what I'm talking about - Go to my editor & Create your web page, first trying something simple like Hello World (maybe change the font size and color) so you'll see how to use my contol panel - Give it a title & Save it. Get out of the editor simply by going back to creative web expressions (you'll see the navigation link at the top). Then you'll notice that I have listed your new web page as the first web page amongst many web pages (the list order defaults to date created sort order) - click on your title and you'll see your web page. Now go back into the editor (login again) it' will open your web page in edit mode once again and this time - insert 7 pictures into your page and then click save... You'll notice that each time you click on the insert picture button, like normal it asks you to browse to the picture file but then it actually inerts the pic into the editor so you can see how it looks in the page. Most on line editors only allow or aford the user to insert one picture at a time - for those that allow 3 pictures at a time you'll notice that they have three file input (browse) fields for the user to use (one field per picture) with my gui - there's no limit 7 pics, 10 - 20 - 100 pics, what ever - and I use the same technique when it comes to inserting multiple files like word docs, excel, power point, zips etc.... Also about your main page - how to present multiple options (lists of links) maybe my menu maker would work good for this purpose - First, make a table on your web site with one 3 col and 3 rows - this will give you 9 cells (right?) OK now go to denverdeals.com free software "menu maker" make one menu (be sure to give it a name) and then make a second, third, forth,... & 9th menu(s) copy and paste the html code from EACH menu that you make one at a time into the cells (between the <TD></TD> tags)
Getting a personal loan is needed only in times of emergency. But did you know that of all the things to get a personal loan for, one of them is NOT an ancient piece of wedding cake. Almost straight out of Seinfeld, someone bought a piece of wedding cake from the wedding of Princess Louise, daughter of Queen Victoria. They didn't pay too much for it â€“ only about Â£150, or about $220, so they probably won't need mortgage loan modification due to putting their house on the block for a 200 year old piece of cake. What a waste.
You must login to reply