A couple of interesting UI techniques at Flickr Sep 02 2010
16 comments Latest by html
1) Interesting use of unicode characters for the UI on Flickr:
That triangle up top is actually two triangle characters side-by-side. Sucks that we still have to resort to such hacks for such a common UI shape — but this is a smart solution.
2) Also interesting is this inline tour of the new photo pages. Rollover a number and bubbles pop up to show you what’s fresh for that section.
Related: Unicode Character ‘BLACK UP-POINTING SMALL TRIANGLE’ (U+25B4)
Got a web design project in mind? Find a web designer on Sortfolio. Browse by visual style, portfolio, budget, and geographic location.
Over 1 million people use 37signals' simple web-based software to collaborate on projects, track contacts, and organize their business with an intranet.
16 comments so far
David 02 Sep 10
Are you sure that the triangle is such a smart solution? For me it shows up differently and buggy in every other browser: Broken Arrow
justin 02 Sep 10
I think the method of using CSS borders to create arrows works slightly better. It doesn’t require you to insert unnecessary characters into the page. However, it still does necessitate extra elements, but at least they’re empty. Tricky to do shadows, too.
Colin Nederkoorn 02 Sep 10
We’re doing something similar with some modals, but my engineers are telling me we use borders, not unicode to achieve it.
http://flic.kr/p/8xyNwL
Marco Palinar 02 Sep 10
@justin
You can always use :after :before and the the content: “▲” to generate the character via CSS (hence keeping the markup clean)
Javan Makhmali 02 Sep 10
Inspired by Flickr’s menus and their use of unicode characters within, I created a jQuery plugin to make somewhat similar menus:
http://github.com/javan/jbar
Henrique 03 Sep 10
A little too clever maybe. Too hacky.
Alex 03 Sep 10
The “▲” character is too tall and narrow. Looks not so good. I found it’s better to use the top part of a diamond character “◆” to make isosceles triangle. This should work in all browsers.
ashchan 03 Sep 10
@David, I saw buggy arrow here too.
Harlan Lewis 03 Sep 10
Alex’s solution is solid.
Alternately, one could wrap each half-triangle and control spacing/position explicitly, rather than leaving it up the browser.
rob 03 Sep 10
I have never found the Flickr UI intuitive or good. This new UI is even more confusing than the original. It is not a place, for instance, that I can send my father to without instruction.
The fact that it needs all these bubbles tells you something…the UI is confusing.
Tim 03 Sep 10
I’m a huge fan of the inline tour / help. I have them littered throughout my application and it’s all driven by a simple backend.
Seems that more apps should answers questions at the point in which the question becomes evident.
wibo 05 Sep 10
i lile the bubble. It’s clear and useful.
Rajiv 06 Sep 10
Thanks for the interesting find!
Greg Macoy 06 Sep 10
I agree with Rob, I regular get frustrated with the UI on Flickr.
Book Publishers 06 Sep 10
Great stuff, love this use for flickr…
html 08 Sep 10
pretty obvious, but really nice
Comments are closed