9

If I have limited space, typically narrow enough that I cannot just spell things normally like "4 Strength" or "Strength 4", as this shrinks the font to nearly unreadable.

How can I layout an icon, text and the number within limited space so it is easiest to see and understand that they are all related?

enter image description here

Update: Here's the context for the icon, this one uses actual font from the app: enter image description here

After applying the recommendations: enter image description here

Improve this question
3
  • What is the context for the number? Is it variable, i.e. there are 4 things to do in the strength section, or is it always 4, i.e. Step 4: Strength?
    – Matt Lavoie
    Jan 4, 2014 at 19:35
  • Is the number like a toast notification indicating information has arrived or is it an option representing a scale e.g. 1 to 5.
    – Jamie Clayton
    Jan 5, 2014 at 3:54
  • I've added a screenshot with where I need to use the icon. It is a counter that is subject to change, based on what equipment the character has.
    – Alex Stone
    Jan 5, 2014 at 6:03

6 Answers 6

Reset to default
11

I think the following micro-changes could improve your current design.

  1. Remove gray frame around the icon. Vertical lines of the frame "activate" the Gestalt principle of continuity and limit the space for text inderneath the icon, see red lines on the picture.
    enter image description here
  2. Use the whole word to describe an icon when possible. I'm not native English speaker, and Con is confusing to me.
  3. Increase contrast between words to separate them, as space between them is small. Use combination of slightly transparent word ending and more prominent beginning of the next close word to crearte contrast. To increase contrast I also used increased font size and more bright color for the first letters. The rest symbols are slightly grayed. Please, see the picture.
    enter image description here

The overall view is on the picture:
enter image description here

Improve this answer
3
  • Sorry for OT, but would you tell me how you created those sexy little red arrows in your second picture? Is there a plugin or something handy for doing them in photoshop? Thank you!
    – RienNeVaPlus
    Jan 5, 2014 at 16:07
  • 2
    Hi, @RienNeVaPlus! I use Xara Designer, it's a vector tool mostly.
    – Alexey Kolchenko
    Jan 5, 2014 at 16:49
  • These are great suggestions! Introducing the gradient may be a bit difficult, unless it's just a transparent image positioned at the end of the cell.
    – Alex Stone
    Jan 6, 2014 at 17:30
6

Try putting the number over the icon and the text below the icon:

enter image description here

Improve this answer
1
  • 2
    That fist really surprised me as I scrolled down :) As for the overlaying text - good idea. I cannot use it however, as my icons are 38x38 px, black and white and typically have little space left
    – Alex Stone
    Jan 5, 2014 at 0:36
2

There are number of good guides around image text and number layout from Apple, Android and Microsoft user experience guides. There are also some very thorough full ideas from the User Experience Magazine.

I'm not sure of UX context but here are some ideas that will need to be adjusted based on how much space your allowed to use in your application. This may depend on what the interaction is (and the terminology is slightly different depending on your UX environment it might be referred to in the following way.

  1. Button Choice. Apple
  2. Information for the user.
  3. Badge information. Bootstrap; Microsoft Metro
  4. Toast Notification. Android
  5. Notification Message. UXBooth; Microsoft Metro Tiles
Improve this answer
1

I would lose the image and use text only. This would give the following layout:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The reason is that the image in the icon doesn't provide any additional information (assuming all gamers know english). You'd get a better balance of the icon, and it wouldn't be cluttered. Simple, nordic, sparse design.

Improve this answer
1
  • 2
    That's definitely an option. The reason why I wanted to include an icon is that this way I can remove the "strength" word in other parts of the app and only use an icon with a number
    – Alex Stone
    Jan 4, 2014 at 19:32
1

Well, to be honest this violates a number of UX best practices and guidelines, but it's effective, scalable and I think that it's well suited to the problem at hand. Lets you use larger digits and avoid contractions, too.

enter image description here

Improve this answer
0

Based on your screen I might re-jig the layout to make it easier to use longer names. Here is a mockup which should help for left to right reading languages. It also groups information in sections rather than the circular method you had for character options. previously.

mock-up of the characters settings

Improve this answer
2
  • But those "character options" are associated with their positions. The helmet is up high, the weapons at hand level, the boots at foot level. It's good UX to make the icon's location suggest its meaning as well as the icon's content, so I prefer the original layout on this point.
    – AlexC
    Jan 7, 2014 at 21:27
  • @Alex, fair enough, I didn't understand the context within your screen shot and now I understand that UX decision. I was trying to think of ways to create more space for including icon descriptive text. I'm a corporate developer, so I think in grids.
    – Jamie Clayton
    Jan 7, 2014 at 21:39

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.