0

Aloha! Im looking for alternative ways to present a table/matrix of words. The purpose of the table is not only to present the words but user should pick some 7 words out of many, say 55. How to make sure user's eye browses through all the words and picks what is relevant for her? Especially on a smart phone screen. Any ideas? table of adjectives

  • 2
    Can these words be categorized in some way? Or do they need to show all at the same time? – Devin Aug 24 '16 at 17:36
  • I cant categorize them. I dont nee to show them at the same time, but user need to be able to grasp the meaning of the each word and be sure the selected 7 are most relevant ones. – Rando Aug 25 '16 at 7:59
  • Are your users fishing for the right word? Like a game or some sort? If not can you group them non alphabetically by the emotion the word conveys? Like from Happy to Sad or Angry. If you put them in tinted boxes with a color signifying the emotion, it will help user to go to the right set of words he is looking for. I am still wondering what context it would be for users to go through random set of 55 words, even if it is test. – Sol Aug 25 '16 at 9:56
  • Yes, fishing for the right 7 words that describe them the most and a person. Is not a game, but could be gamified. I actually dont want to categorize the words as tags like Sad, Angry and Happy can biasing. But I agree that could help users to go through these words more easily. – Rando Aug 26 '16 at 6:50
4

Constraints

Update Includes new constraints based on new information from the original poster.

  1. If a user has to choose 7 out of 55 words the solution should include controls for selecting words easily. It should be quick and easy because the user would have to do this 7 times.

  2. If a user has to browse a list of 55 words their selections will probably be unstable. Meaning they will make several edits to the list before confirming it because they will gradually take in more options that they may opt to select. the solution should allow the user to have the current selection of words near at hand at all times. As part of this tracking process, selected words should also be obvious when browsing the list of available words. Because of instability of the selection the UI should allow the user to remove words from their list of selection throughout the process.

  3. If a user has to make a selection from a list of 55 words you would need to limit the number of options that are available at any one time. This would make it easier for the user to consume all the options and make the task feel less overwhelming.

  4. If this UI is being designed for a mobile screen then a table will definitely not be appropriate because the minimum touch target size must be satisfied.

    1. If the user has to be exposed to all available options before completing the activity then you must restrict them from completing the activity before they are shown all the options.

    2. If the user needs the ability to properly consider all past options after making their selection they should be exposed to each available word multiple times.

Requirements

  1. Fast and easy word selection.
  2. Persistent list of selected words.
  3. Fast and easy removal of selected words.
  4. Selected words should be either highlighted or removed from the list of options.
  5. Few available words (3-5) visible at any one time.
  6. Controls must be touch targets.
  7. Ensure user is exposed to all available words
  8. Ensure user selects the best words and not the first 7 words they like.

Possible Solution

Display mini lists of 3-5 words, which can be paged by swiping left and right. The user can select a word by tapping it. Words that are selected are removed from the list and added to a persistent bottom bar. The words should appear as touchable targets probably with an x icon incorporated to signal to the user that they can be removed by tapping. When tapped selected words should be removed from the persistent bottom bar and returned to its mini list. Task instructions should be included in the bottom bar and should countdown the words as the user makes additional selections eg. '3 more words to go'.

To ensure the user considers all options you should expose them to each word multiple times. Determine and set a max repetition for words and repeat the words randomly in the mini lists. If the user makes the required number of selections before being exposed to each word at the specified repetition include an instruction in the bottom bar to indicate that the task will not be complete until they have viewed all the words. When the bottom bar has the required number of words (7) and all the words have been shown a confirmation button should appear in the bar. This will indicate to the user that they have successfully completed the task and progressively displaying it will eliminate the need for complex error states.

UI Sketches

Initial UI state

User selects a word Swiping to a new mini list

| improve this answer | |
  • 1
    +1 for a great detailed answer. I see a problem though (absolutely not your fault, but coming from the initial IA): if this is for personality/psychological tests (which it looks like), data will be unreliable, since people may forget about words they saw in other previous screens. This is quite an interesting and difficult problem, and in these conditions, I think your proposed solution is really good, but a perfect solution would require more input from the OP – Devin Aug 24 '16 at 19:38
  • 1
    @Devin interesting. If that is the case we may need to add an additional constraint to have users view all words before being able to confirm and/or repeat and randomize the words presented in the mini lists. – Andre Dickson Aug 24 '16 at 19:46
  • Wow, Andre, @Devin, thank you for reacting so fast and really thinking along! Its a kind of psychological self assessment test yes. I like the idea of 5 words at a time, and it makes sense. It could be like rotating cylinder where one row of 3-5 words is in the focus and the rest, coming-and-going, are smaller. However yes at some point it may be valuable for user to see all the possible selections and the selected ones just to make sure those 7 are really the ones. PS: I What are IA and OP by the way? – Rando Aug 25 '16 at 8:14
  • I believe OP stands for Original Poster, that's you @Rando. I'm not sure what IA is. I've updated the answer to reflect the new information you've provided. Hope this answers all your questions. – Andre Dickson Aug 25 '16 at 8:48
  • 1
    IA is Information Architecture. – Sol Aug 25 '16 at 9:53
0

Have word boxes with an editable label on each box and all 55 words initially in one of those boxes. Let the user label each box the whey they want and let them drag and drop each word to each "bucket" of words freely. Allow the user to tell the system "I'm done, this box contains my selection" somehow. My guess is that this design works well for a task that is done many times, by many people, because, over time, people will create ways of solving it and will share their experience with each other, leading to one solution (or several) proven to be good.

Another aproach (not so free) is to have those text boxes already labeled like this:

  • not categorized yet
  • undoubtely bad words
  • probably bad words
  • probably good words
  • undoubtely good words
  • final selection

(if those labels are to long, you can use numbers to represente the "grade" of each group) It is important to have few boxes so the user don't have to think too much while categorizing (few options makes a choice easier). The first step to the user is to move the words from the "not categorized yet" box to the other four ones. Then, the "undoubtely good words" + the "probably good words" will have much less than 55 words and not too much more than 7 (hopefully), which makes it easier to get to final selection. If they couldn't eliminate too many words, it's good to allow the user to empty some boxes so they can be reused and start the process again with the remaining words.

I would say that I described a mental model, so it can be displayed in several ways. For example, if the screen is too small, you can put only one bucket visible at a time and, instead of dragging and dropping the words, the user clicks on a word and then four little options appear (with four different colours).

There are other possibilities, for example: Show a list of the words with this instruction at the top: "Swipe to the right the words you think that might be selected. This is a first filter. Afterwards we will refine that selection. So if you're in doubt, swipe it." Then repeat this step with the remaining words.

| improve this answer | |
  • Thanks @Heitor I like the approach of several steps / categories as it may indeed be hard for user to make a finite decision (yes or no) from the scratch. To add some fuzzy logic / maybe zone makes sense. I wonder if it needs to be somehow gamified to get user more engaged entertained during this process.. – Rando Aug 25 '16 at 8:23
0

I see something different and fun. A tag cloud - clickable - and every click increases the size of a tag. There doesn't have to be a specific selection of 7, so the user can just keep clicking things as they grow until they get to a point where they feel it is the most relevant to them. Yes, it is more than 7 clicks, but if done as more of a game, it is not necessary to reduce clicks to a minimum. The system could then take the 7 top selections. A little out of the box, but could net good results?

| improve this answer | |
  • Yes @Brad, its not necessarily how few clicks user needs to make but what is the whole experience, engagement and fun she experiences. This is definitely new experience. I could even ask user to sleep on it and continue clicking the next day to see if the adjectives that stand out are really the ones and ask to do some more clicking(: – Rando Aug 25 '16 at 8:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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