Hierarchical structure design and usability

Question

I created a website for learning languages with flashcard method. The website itself is http://www.vocableman.com

The problem I have run into is that users are complaining that they have problems with understanding the functions and the main cause is propably the hieararchical structure I use in the Cards and folders section (you can see a simplier version in the Public folders section after clicking on one of the folders), which introduces the users ability to create folders and subfolders that contain individual learning flashcards.

Is there a way to create/design/imitate this tree-like structure easier to use and understand for users and maybe also easier to use on touch devices (the tree structure is quite hard to use, because the active regions for collapsing and expanding items is quite small)?

UPDATE: What other improvements of the usability of the site itself can you recommend?

Answer 1

Your site has some nice design, but appears to never have had actual user testing. You would seriously benefit from grabbing five random strangers off the street, pay them each $50, and ask them to perform specific tasks (learn from a public folder, sign up, learn from a private paid folder) while you look on and try your damnedest to not help but instead record how they fail. There are many small but easy, obvious, quick fixes you could be doing to improve your site. Too many to list here, though if you are unwilling to test it yourself I'm sure there are many usability experts who could compile a list of recommendations for you for a moderate fee.

For the main answer:

The folders on the left do not afford clicking. They look like an unclickable list of words, not a menu structure. This is emphasized by the contrast between the first item (which is in 'link blue') and the rest of the items (in 'I'm not a link black'). You are using text decoration reserved for indicating 'I am a link' to instead indicate 'I am the active link'. Instead, decorate all the items on the left as links, and highlight the current folder in a different manner (perhaps color it red, perhaps give it a background color).

Secondly I would eliminate the border around the left column. The navigation section feels more like a content section because it is 'contained' in the 'content box'. Break it out of the box and it will feel a bit more like a navigational element. You could also give it a slight background color to set it apart from the content in the larger right column.

Finally, I would give users the ability to add descriptions to a folder. This description would appear above any flashcards that folder contains; if the folder has no cards, the description would be the only item in the box. This would allow users to describe the expected use of the navigation to the left and the cards in the current folder... categorized sections, sequential lesson plans, etc.

Answer 2

Hierarchical navigation on touch-screen devices is a well-explored area. As I seem to have to say on every issue tagged with "touch-screen", there's no single standard for touch screen hardware, and every single kind of device has its own strengths and weaknesses (as well as conventions).

If you're referring to a small, capacitive touch mobile device like an iPhone, the convention is successive list views (all strung together using UINavigationController):

Image taken from nerohoop的专栏

If you're referring instead to something larger like an iPad tablet, you can do the same thing as the above but using a sidebar/popover.

If you're thinking of Windows 8/Windows RT (full-screen Metro apps) or custom kiosk software, the convention is successive screens of buttons (unless you can flatten the hierarchy, which is generally a better option unless you'd end up with an extreme number of items on one screen).

Here's Discourse, a Metro RSS reader:

Image taken from Softonic.com

…and here's how Microsoft themselves display information that is classically hierarchical (arbitrary files and folders) in their Skydrive app for Windows 8:

Image taken from MSDN Blogs

With our custom kiosk software IQ LINK, we need to be able to show a dynamic hierarchy of arbitrary depth on heavy-duty (relatively low-responsiveness) capacitive hardware, so we do it with a successive series of button grids:

Image taken from the IQ LINK website