how to better organize resources within a page

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
pap123
Forum Newbie
Posts: 1
Joined: Mon Dec 19, 2011 12:12 pm

how to better organize resources within a page

Post by pap123 »

Hey all,

I would *love* some advice and guidance on how to improve the user experience when they visit some of my pages which reference a list of items (say, PDF files). Obviously, it is annoying to have to scroll down. And it's easy to lose your place. And get lost along the page while scrolling up and down.

The most problematic page is:

http://www.cyberbullying.us/resources.php

You've seen I've used Javascript expand menus to help a little. But is this the best solution? You still get lost while scrolling down.

The other problematic pages are:

http://www.cyberbullying.us/publications.php (there are just sooooo many items)

http://www.cyberbullying.us/presentations.php


You are welcome to check out the other sections of the site via the navigation menu. Anyway, my goal is to create a great user experience for site visitors. I *welcome* your input and suggestions as to how to make it better. And, if you have suggestions outside of UI design issues, I also want to hear them. I am determined to get better at all of this.

Thanks in advance.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: how to better organize resources within a page

Post by califdon »

My impression is that you've done quite a good job. There is an inherent issue with a large list of items, and the only way I know to address that is to find natural, intuitive groupings and then employ some expand/contract visual mechanism to limit the number of items in any one group. If it makes sense in the context of your data, perhaps a second level of grouping might help.

I did find the font size to be a bit small for my (ancient) eyes; it might not be for others. My suggestion would be to use some visual clue such as a button or border for each item that can be expanded, rather than just the plain text. As an illustration, you might take a look at
http://www.interspire.com/content/2005/ ... avascript/
and http://www.dynamicdrive.com/dynamicindex1/indexc.html.

I understand your concern about scrolling, but for any list that contains many items, your only trade-off is between font-size and selective grouping. Good luck.
Live24x7
Forum Contributor
Posts: 194
Joined: Sat Nov 19, 2011 9:32 am

Re: how to better organize resources within a page

Post by Live24x7 »

an alternative could be to provide just the text links in the main content area or in one of the sidebars.
This will let the viewer see though all the list of titles without having to scroll down.

You can then use javascript to dynamically display the related brochure image when a person hovers on the particular title link.

and yes the font size could be atleast one point higher - its straining on the eyes
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: how to better organize resources within a page

Post by pickle »

  • More whitespace - it helps the eyes focus
  • Smaller thumbnails - they're essentially icons
  • Straighten the thumbnails - it might look neat to have them tilted, but it throws off the lines
  • On the publications page, there's no reason to use full MLA format when listing the publications. That format is for attribution purposes and is absolutely not easy to browse through. Just use the title of the publication and if you want, put all the nitty gritty details in the details section
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply