Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am trying to do a UI that show a photo (or box) being selected and tagged. For example:

http://behance.vo.llnwd.net/profiles/59549/projects/3012199/8c0a114a08fa35bfbb0e6bc32936a525.jpg

Original Url: http://www.webdesignserved.com/gallery/Canal-180/3012199

As you seem, the photos there were selected in green border with the triangle on top right. Here is the problem:

  1. I want to show something in the triangle that is dynamic. Basically, I want to show numbers in that little triangle.

  2. If the number is 0-9, it's OK. But if it goes larger to 2 digits such as 55, it doesn't fit the triangle.

  3. I don't want to make smaller font for 2 digits number

I could make the triangle to be square or rectangle. But that kind of UI seems "weird". Is there any good suggestion? What have you seen in other websites?

Thanks.

share|improve this question
    
Can you provide a little bit more info? Why do you need to select photo's? What purpose do the tags have? What do the numbers do? –  Misha Scholte Jan 16 '13 at 21:42
    
Why not make it into a circle instead? People are familiar with the 'badge' concept in iPhone. –  Michael Lai Aug 15 '13 at 3:17

2 Answers 2

up vote 2 down vote accepted

A fairly simple solution would be to create an image div, a border div, and the dynamic content. Here is an example: JSFIDDLE

This method also allows you to see the square corner tag. I think you're right, a triangle would be a more finished look over the square. Circles look too much like the typical screw, which works in some UI designs, but might not be a winner here.

To give this a triangle look, create a border vector image, or something web friendly, and make the background transparent. Place an IMG tag in the "border" div and line it up with CSS. remove the padding from the "dynamicContent". Then, you're golden.

I hope this helps!

share|improve this answer
    
Thanks for the sample code but I was open to any other UI ideas. The rectangle doesn't make it look good though :D –  HP. Jan 16 '13 at 21:20

For "technical counters" I sometimes add the "0" to one digit numbers (01, 02, …) – but I suppose you don't want to use two digit numbers by default ?

share|improve this answer
    
Yah putting 0 in front would make it "ugly". Any other idea on displaying a number tagged to a photo after being selected? –  HP. Jan 16 '13 at 21:21
    
So what is the number actually going to represent? Does it have to be an exact number? And could it in some cases also even become a three digit number? –  tillinberlin Jan 17 '13 at 10:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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