10

I've got two horizontal lists - one that contains Chinese characters (list A) and the second that contains the decomposition of the selected character (list B). Currently, when the user clicks on either a Chinese character or a component, it will be displayed in the big box above.

The thing works, however the relationship between the various UI controls is not obvious. In general, what would be the best way to indicate that:

  1. Clicking on an item in list A would display related information in list B?

  2. Clicking on an item in list A or B would display more information in the big box?

I think I looked at this for too long and can't quite think of a way to improve it, so any suggestion would be appreciated. Here's the current UI:

enter image description here

Improve this question

8 Answers 8

Reset to default
12

First, connect list A to list B visually, possibly like this:

list A connected to list B

Then also position the character box below both list A and list B.

You would then have a clear hierarchy of connectedness.

Improve this answer
2
  • Physical connection is a great way to go, especially if proximity isn't a strong enough connection.
    – Ben Brocka
    Oct 22, 2011 at 17:09
  • see also eLouai's answer, particularly resizing the second box to fit the number of character components, and also FrankL's of showing the location of the strokes.
    – Erics
    Oct 26, 2011 at 10:23
6

I like Erics answer, but would like to visually enhance it a little in order to show spacial relations. Because as far as I know this is important in chinese letters.

enter image description here

This post would be more appropiate as a comment to eric, but I dont know if you can put images in comments - Im new at SE.

Improve this answer
2
  • Nope, images in comments not possible. You can make a comment that has a link to your answer, though.
    – Ilari Kajaste
    Oct 27, 2011 at 6:46
  • Excellent stuff. This suggestion is every bit as important as the call-out and makes a HUGE difference in clarifying what the second list contains.
    – Mal Ross
    Oct 27, 2011 at 9:54
4

Somehow i keep having trouble with these two levels, one is actually a sub category of another, and they look the same. Also selecting a character on first level, and then selecting a character on a second level (piece of first) makes it a strange experience if i want to go back to the character, i need to select the selected item.

It seems to me that i need this broken down view when i focus on the character and not before that. So i tried to extract that and place it on the window with character.

It also seems like having two rows kind of forces user to select through both while i would give option for that only after you select the first one..

p.s. i also shrank that big ugly restart button :S but it still looks out of place

Here is my suggestion:

Suggestion

Improve this answer
2

You might consider having a separate "Large" display for each type of selection box. That way you can a full character next to one of its deconstructed elements simultaneously.

If you want to stick with a large display, I like where Erics is going, but you want to give yourself the option to select the full character or one of its deconstructions—that's why a column browse pattern doesn't quite fit your need correctly. What you might try, instead, is creating a sort of cross-reference for each full character:

enter image description here

Improve this answer
2

To expand on Erics said, The physical connection is needed ALSO the visual metahpor needs to change.

Convert list B into a 'text bubble'.

It then CLEARLY shows the UI relationship between list A and list B. Get rid of all the empty space in text field, it justs a visually cleaner relationship.

text bubble

Improve this answer
1

I thought about that little triangle thing that points to the character but didn't know what to do with a title. Also, its always strange to me to see that if there is a clear identification for selection (like here already is). This is just some personal opinion.

You can try just making the bottom box inactive when there is nothing selected at the top one. (or even removing it - but again depends on the layout).

Since i don't know how the rest of your application looks like, i cannot suggest any reordering of the elements.

Improve this answer
1

Visual linkage is the way to go. An expensive approach would be to have an animation of the top character disseminating into the lower ones. The arrow is probably good enough for most situations, as it gives the clear visual connection.

To me, it is not clear that the characters are clickable - if you can give some gentle visual hints, it is more likely to make that clear.

Hiding the lower box and then unfolding it when a character is clicked should give an indication of the connection. If you follow the progress of the users, and make the visual presentation follow that, it should be clear.

Improve this answer
1

In this Slideshare presentation about screen layouts are many examples how it could be solved by using established patterns. Take a look at Master/Detail and Column Browse for your problem..

I would recommend to place listboxes at top and/or left to match western reading patterns. So scanning your page would lead your eye over clickable options first, thus knowing possible actions easily.

Edit: As far as you going for a desktop or browser solution. After re-reading your post, I'm not sure if you are looking for a mobile pattern, than a browser one. If so dont mind this answer.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.