Sometimes, in rare times, I’d then come across website design that can make me cry. Not because that they are nice, But because they are f******g nice.

Recently, a post Smashing Magazine made me do just that. It posted an article by Torley Wong’s on great user interface ideas. (Link to original – “Creative User Interfaces in Modern Web Design” here).

I decided to check all of the websites out. And most of them really truly inspired me that I had to share with the team here. I’ve replaced the author; Torley Wong’s article with mine below. Feel free to visit the original article and read up on his thoughts. Some sites have also been omitted from my updated version as I believe, after checking the works, they did not really fit into the context of user interface design from the perspective that I am writing on.

Hope you enjoy it. And to the design team working with me, hope you are all truly inspired to go create stuff as good as these.

OkayDave

Dave Werner’s website is not new. It’s been around since 2006. And I first saw it was back then. Yet even till now (now being 2008) it is still innovative and ahead of the curve. What is more surprising was that he had created this site as part of his portfolio piece for his graduation. Yes. His student work kicks more ass than most industry veteran designers combined.

Dave Werver

Vimeoland

Vimeo is cool. Vimeo with HD is cooler. Vimeo with VimeoLand is coolest. Vimeoland is like watching a cartoon show with characters going around speaking in videos. This is probably experimental and a fun side project by the staff. But heck, it’s a way to show videos to the short-attention-span, visually oriented group.

vimeoland

Grooveshark

I used to like Pandora. Then I used to like Last.FM. Then after that I like Imeem. Now I like Grooveshark. Apart from the large artist repository and rare music (I tried Sinnerman* by Nina Simone).

*Side note: Nina Simone’s Sinnerman = Nokia = Tipping Point. Ask me what I mean by this.

And the user interface design. Oh My GAWD! It’s a UI designer wet dream. Beautiful, large buttons. Reminds me of the iPhone user interface. Really simple, no nonsense.

It takes a strong, very confident designer to design a user interface devoid of the usual ‘creative’ stuff like imageries and such; and only focus on the functionality of content driving the design.

Perhaps we should look at this as an example for one of our music initiatives for the company.

Grooveshark.com

SpaceCollective.org

Into spacey, trans-human stuff? Then go to SpaceCollective.Org. But seriously, subject matter aside, this site takes grid or tab-like interface to a new level. It’s nice to know that even people who thinks really out of this world thinks of other humans first when it comes to designing really usable, functional interfaces.

(Or were they thinking of animals and other non-humans when designing this site? Perhaps simple enough that even a monkey can use.)

spacecollective.org

Viewzi

Two months back, I commented that there would be a new war of the search engines. And that I just do not know in what form that they’ll be in.

Now the answer has come – Visual search.

And with visual searches comes visual interface designs designed to present these search results in a deeply considered, user-centered creative approach.

Again, this will take a very confident designer to create interfaces that’s simple and puts content as the hero over the usual visual fluff.

viewzi

Like.com

Another dice thrown into the visual search table game. This time by Like.com. And this time I’m not too sure how this type of visual search will pan out though.

Unlike Viewzi, where you type in your search keywords and it returns you the results in a visual display, Like.com searches by the images you send it and it searches for like-wise items. Preferably, one or more of them being what you’re looking for.

I’m just not too sure how simple or smart it will be for the really novice users though. It is a smart engine. But perhaps a little too smart for now. Too ahead of its time. Like Boo.com was a decade ago. Not usable now. Maybe later.

What I do like about Like.com though is in its visual array presentation format. This one I like a lot. If you’re looking at a smart, clean visual presentation format of many (tens to hundreds) of items in a e-store site, Like.com is the perfect fit.

like.com

Navigaya

Oh another Visual Search have we? Yes we have. This time by Navigaya. This time better than (although in similar presentation format) Viewzi. And definitely way better than Like.com. In my humble opinion.

Like Viewzi, it starts with a simple search bar. And the results are presented bang on, large on center screen. What makes Navigaya better is how subtle things are or becomes. After a certain time of inaction, everything fades off. And comes back on again when the mouse is moved. This keeps focus only on the item at play and keep non-essential item in the background, appearing again when called for. Again for the strong designer who knows that the strength of a site is in its content.

It does have its drawback. In that it’s not as clean and sleek as Viewzi. But I think it’s catering to a visually oriented target market. The kind who likes to see eye candies and bursting bubbles move about.

navigaya

GoDesignate

I would not label GoDesignate as design. But if user interface design is all about user interfaces that is functional, then GoDesignate is it.

Basically I’d say that there are two forms of user interface design. First is visual-related. Most creative designers (including most of you in my team) are visual designers. Second is functional-related. Not many designers are functional designers.

I would relate functional designers as being those designers that have elevated themselves to a state where, integral to their designs are the visual cues that emerge in the user’s minds. Functional designers design for a symbiosis of the user and the product to become one. Usually the design would be simple, with a focus on getting the user to using the product better.

Ok. Enough of the mumbo-jumbos. Here you go… GoDesignate’s functional simplicity.

godesignate

Hypnoteis

While on the topic of Visual vs Functional designers. This next one marries both. Teis Albers designs are visual intensive montages that represent the trend now. Something I personally love.

Yet his showcase website goes beyond visual fluff and focuses on simplicity of use. Again the focus is on content being the hero of the design. Going with the principle that while the content itself is loud, the container is simple. And vice versa.

hypnoteis

Serge Seidlitz

But then, sometimes as a designer, you might want to make visual fluff. You REALLY want visual fluff as the hero. To you, your work should be the focus. That’s what Serge is doing.

Unlike Hynoteis where the work is separated from the interface, Serge’s site is a montage of his work. And it does so intentionally. Yet even so, amidst the visual complexity, comes the simplicity of use. You get what you click. No mouseovers. No fancy overlays. Proof that design complexity can also be simple to use. While the design is complex, the function is simple. Vice versa to the above site.

It’s like order in chaos. I LIKE!

serge seidlitz

Six Pixels of Separation

If I were to design a blog; this would be it. If I were to write insights and article; this would be it. If I were to architect information; this would be it.

Basically, Mitch Joel is doing what I would have exactly done. Except that he’s been doing it way more than me and is probably doing it more often than I get to do. What would otherwise have been a content heavy website, with too many links to too many places is very well organized.

Graphics are used sparsely to maximum effect. Using them to provide information and drive users to deeper content. Even if one were to not read much and scan only for headlines and keywords, one would be relatively successful at it.

six pixels of separation

Fontpark 2.0

It’s like typography. Only, with Japanese Kanji characters. Only with Kanji turning into actual characters. Like an actual character. Like a face. A Font Face. Yes really. A Font, that’s like a Face.

I would not have classified this site as good user interface design. It’s more creative than good. But the fact that it got me mesmerized for a good 10 minutes after the site load really speaks much for itself. Just sitting here watching the artwork and stories unfold was just amazing.

One can’t help but feel a sense of zen-ness by visiting the site here.

fontpark

Bestiario

If in case you don’t know, there is one field that many open-sourced sites are really getting into and experimenting much lately – Data Visualisation. Basically is a fairly new field in the online space where more and more efforts are being put into in the area of developing online applications to crunch and present massive complex data visually.

It’s like answering the pertinent questions of “Great, but how do these numbers connect? And what do they represent?” that most of us ask when given stacks over stacks of excel spreadsheets.

bestiario

The above are examples of great, creative interpretations in user interfaces design. While the designs and executions may vary from one designer to another, the concepts and principles remain the same – that great web design must be usable and a joy to use.

Noticed taht in the top 10 websites, the design is focused on bringing the beauty of the content forward. Style is minimal, yet when doing so, it made the site so much more visually striking.

1. guardian.co.uk

2. BBC – Homepage

3. Wired News

4. UX Magazine – The User Experience Magazine

5. Vanity Fair: vanityfair.com

6. The New York Times

7. Frieze Magazine

8. New York City News Service

9. The New Yorker

10. CNN.com

11. National Gazette

12. TIME.com

13. The Morning News

14. Grand Sierra Magazine

15. Economist.com

16. JPG Magazine: Your World in Pictures

17. La Repubblica.it

18. Salient.org

19. FILE Magazine – Unexpected Photography.

20. Azure Magazine

21. art and design magazine

22. CREATIVEurope

23. washingtonpost.com

24. Archfarm: Non-periodical fascicles on architecture

…also worth a look…

25. Schematic.com

26. Creative And Live

27. Reform and Revolution

28. Slate Magazine

29. Peshku pa uje

30. Computerworld

If anything, these are our benchmarks that any web form design must meet.

Extracted and condensed are the survey results below.  Actual links (with nice graphical charts) to both parts of the survey follows right after.

Here it goes. Web Form Design Pattern Best Practices Part 1…

- “Sign Up” is most popular link title to form (40%)
- The header is the most popular place to put the link (59%)
- Placed at top right hand corner (76%)
- Simplified design when compared to page layouts (61%)
- Benefits of registration are presented next to form (41%)
- One-page forms (91%)
- Using bold to highlight title of input fields (62%)
- Right aligned labels closer to input fields (41%)
- Only 3 to 5 mandatory fields (50%)
- 6 to 8 mandatory fields (30%)
- Zero optional fields, only collected after sign-up is complete (62%)
- Less than 5 optional fields (98%)
- Vertically arranged forms (86%)
- Do not have asterisks* to indicate mandatory fields (78%)
- Progress indicator (9%)
- Simple web form with as little fields as possible (86%)
- Grouped and divided by white space (69%)
- Divided by borders (22%)

Web Form Design Pattern Best Practices Part 2…

- No hover, active, focus effects in use (84%)
- Static help support placed obviously next to input field (57%)
- No hints (33%)
- Error messages at the top – no fields highlighted (30%)
- Error messages highlighted at form fields – no top message (29%)
- Both top error message and error fields highlighted (25%)
- Real-time AJAX validation warning or error (22%)
- Colour Green used to indicate success, and Red to show failure (97%)
- Not necessary to ‘confirm email address’ by second input field (82%)
- Necessary to confirm password (72%)
- Captcha not in use (59%)
- Cancel button not used (92%)
- Left-aligned submit button (56%)
- After successful sign-up, load non-mandatory fields or tell friends (45%)
- After successful sign-up, recommend places to go or link to click (33%)
- After successful sign-up, basic thank you page with no extra links (4%)
- After successful sign-up, redirect to homepage (2%)
- Using tab indexes (99%)
- ‘System Talk’ tone and manner – Login, Password, Location (38%)
- ‘Business Talk’ tone and manner – Your name, Confirm Password (38%)
- ‘Conversational talk’ tone and manner – Tell us who you are, etc (22%)

Too much text! IToo much to read. Don’t understand. I know.

So here’s the link to both parts – Part 1, Part 2.

UI Design Pattern is a strong marriage of Information Architecture (IA) and User Interface (UI) turning a set of User Experience (UX) goal into simple intuitive interfaces.

Here is a collection of design pattern library from UI-Patterns.com. Great help for when designing intuitive next gen user interfaces.

“UI-Patterns.com are not the first to create a UI design library.
While other pattern collections are useful, they are far from coherent
and complete. The purpose of this site is over time to fill some of the
gaps – especially by providing code examples as to how how the
different patterns can be implemented: to join theory with practice.”

Input Feedback
The user have entered input into the system expects to receive feedback on the result of the submission.

Account Registration
You wish to know who the active user is in order to provide personalized content or opportunities to conduct a purchase.

Vote To Promote
The user wants to promote a specific piece of content in order to democratically help decide what content is more popular.

Lazy Registration
The user wants to immediately use you and try your website without conducting a formal registration beforehand.

Password Strength Meter
You want to make sure your user’s passwords a sufficiently strong in order to prevent malicious attacks.

Inline Help Box
The user needs an assistive introduction aside the interaction he is about to perform.

Tag Cloud
The user wants to browse content by popularity or most elaborate topic.

Tag
The user wants to find more data in the same category and/or contribute data in the same category.

Live Preview
The user wants to check how changes in form fields effect and end result as quickly as possible.

WYSIWYG
The user wants to add formatted text content, but does not have the know-how to write HTML.

Wiki
You want to provide the user the option of adding to- or editing information on a website.

Live Filter
The user wishes to specify a search by different categories to narrow down results.

Archive
The user wants to search for an article of interest by chronological order.

Pagination
The user needs to view a subset of sorted data that is not easily displayed on one page.

Continuous Scrolling
The user needs to view a subset of data that is not easily displayed on a single page.

Blank Slate
The user needs to get started and get a feel of how the application will feel when fully in function and filled with data.

Tip A Friend
The user wants to share something of interest with a peer.

Steps Left
The user is about to go through the process of filling in data over several steps and is in need of guidance.

Coupon
You want to attract your users to conduct a purchase of one of your products.

Subscription
The user wants to start a subscription of a service.