Visual user interfaces have a profound impact on user experience when it comes to web & mobile apps. Here are some truly great ones to inspire you to create more of the same.

Pull/Unfold
Here’s one posted by Cuberto on Dribble.  This graphical user interface is designed to look like a piece of paper unfolding; slide right to pull up a hidden dashboard screen; slide left and the interface refolds to again hide the dashboard. In the example below, the left to right slide gesture is hierarchical– essentially, left to go back/access top nav actions, right to move forward/return to 2nd nav interface.  See other instances of this how this fold element is incorporated into mobile UIs on Dribble here.

User image


















Rotate
When you use a camera, there is a rotary that you turn in order to adjust picture taking settings and conditions. Paul Flavius Nechita has translated that physical interface into an iPad design that mimics the same usability principles using a rotation gesture. Cool. Another examples of circular UIs for gestures below.

User image

















User image


















Push/Select
I wouldn’t be surprised if this twitter button (posted on Dribble by Matt Gentile) has a pretty high click through rate because of its tactile appearance & sticky behavior. Some strategically placed drop shadows make the user experience feel like you are actually pushing a button. The “sticky” element contributes to this experience, since once clicked or touched, the button remains inverted.

User image

















Here’s is another beautiful and simple UI that utilizes the tap/select gesture; featured below is a visual dashboard. Love the color change for the active state. Posted on Dribble by Artsiom Grlmc.

User image

















GUI buttons posted by Adrien Olczak on Dribble. Very realistic. (below)

User image


















Multi
The first image below is a graphical interface designed to function as a controller. The design is clean and overtly simple to compliment the rich functionality it will support through gestures– push, pull slide, rotate. A design that is crowded or too colorful or busy would make for a terrible UX. This follows best practice for GUI’s- keep it simple.

User image

















Audio/stereo interface design (below.)

User image


















Horizontal Slide
Shared on Dribble by Daniel David, the interface below is designed for landscape view and looks like it incorporates gestures to imitate how you’d thumb through a book. The menu tabs on the left with vertical titles do for the user what breadcrumbs do on desktop; a slide of the finger gives users an organized way to easily flip back and forth between more narrow and more general search results.

User image

















Here’s another one from Magdalena Dymanska on Dribble.

User image


















Vertical Tap & Scroll
This is a vertical accordion slide. The interface is designed to layer content without moving into a separate UI to access the more detailed information. If you tap each FAQ sentence, this UI works like a show/hide for desktop.

User image
















The UI below is posted by Osagie Igbeare on Dribble. It’s designed for YouTube– the white over-layed columns show suggested videos, and their height is proportional to the  number of views that video has.

User image


















Pinch
There’s an iPhone app called Clear that pretty much uses this one element- vertical accordion slides– to construct the entire GUI; but use of gestures and color gradients are are what dictate the order, priority, and status of to-do list items. Clear uses the pinch function in crazy ways to let users organize their lists hierarchically. Just try it.

User image
























2012/07/23 10:25 2012/07/23 10:25
Tag // , , ,

Smart Way to Bank

from keep & trend 2012/06/11 14:07



Citi is revolutionizing the way people bank with the introduction of Smart Banking branches in Asia. Asia Pacific CEO Stephen Bird and Asia Pacific Head of Consumer Bank and Cards Jonathan Larsen share how the concept was first developed and introduced.
2012/06/11 14:07 2012/06/11 14:07
Tag // , , ,

Identity for SSI

from works/latest 2012/06/05 10:15
User image











































































Smart + Collective Intelligence + Convergence

Identity design for Shinhan Smart Innovators is created for the group that consisted of 32 members from Shinhan financial group. SSI plans to lead smart financial market with researching specific topic, leading ubiquitous work and even discovering new besiness and service model in digital environment. 1th SSI is lasting in end of 2013.
2012/06/05 10:15 2012/06/05 10:15
Tag // , ,
User image

0
2012. 05
Project : Shinhan Card 'Shinhan Smart Wallet'App
My Position : UX(UI & GUI) Part PL - 100%
2012/04/26 14:58 2012/04/26 14:58
Tag // ,
User image

0
2012. 03
Project : Shinhan Card 'Smart Shinhan'App Renewal
My Position : UX(UI & GUI) Part PL - 100%
2012/04/26 14:21 2012/04/26 14:21
Tag // , ,



A video to show how you can use Google's Real-Time Insights Finder to support your marketing planning process. Discover how our insights tools can be a window into the attitudes, perceptions and needs of your consumers to inform your next brand positioning, media strategy or just look smart in your next meeting. Available at thinkwithgoogle.com/insights/tools
2012/01/19 11:44 2012/01/19 11:44
Tag //

HCI 2012 - Crowd and Cloud

from life 2012/01/19 10:29
User image




























































HCI Conference 2012 in PyeongChang, 11th~13th. Jan.
When I arrived in Alpencia Resort, the sun was extremely shining although it was so cold.
It could be even nice time for refreshing myself anyway, we had no sooner arrived than the conference started.


User image







































one of interesting sessions I've attended was the pannel discussion titled 'talking about UX with 4 UX columnists and remaining stories'. columnists were not only columnist but also they have even various experiences working at real market as UX expert, 김성우-KT, 이동석-SK Planet, 김준환-삼성전자, 이지현-Seoul Womens University. it was quite open discussion even regarding worst things about working as UX position in the companies.


User image





















Tutirial session 'Usage of Persona' it was one of the most crowded session presented by 전성진 이사 in PXD. not so unique story but quite useful.


User image
























































Exhibition by university students


User image













































































some interesting interactive installation projects but not so special ;). most of them were very similar subjects that I've seen when i was in London : )


User image









































HCI party with dinner attending around 1200 people maybe..
2012/01/19 10:29 2012/01/19 10:29
Tag // , ,
User image

0
2011
Project : Shinhan Group Mobile Messenger
My Position : UX(UI & GUI) Part PM - 100%
2012/01/10 14:06 2012/01/10 14:06
User image

0
2011
Project : Mobile Launcher for Shinhan Financial Group
My Position : UX(UI & GUI) Part PM - 100%
2012/01/10 13:53 2012/01/10 13:53
Tag // , ,

Pagination Gallery

from keep & trend 2012/01/04 14:44

In most cases pagination is better than traditional “previous – next” navigation as it offers visitors a more quick and convenient navigation through the site. It’s not a must, but a useful nice-to-have-feature.

Let’s take a look at the good practices of pagination design as well as some examples of when and how the pagination is usually implemented.

 Good Practices Of Pagination Design(7 Aspects according to Faruk Ates)

1.Provide large clickable areas
2.Don’t use underlines
3.Identify the current page
4.Space out page links
5.Provide Previous and Next links
6.Use First and Last links (where applicable)
7.Put First and Last links on the outside

 Mistake #1: Navigation Options Are Invisible
Since pagination’s primary purpose is to serve as an improved navigation, it is supposed to make it clear for the visitors where they are, where they’ve already been and where they can go next. These three facts give users a complete understanding of how the system works and how the navigation should be used.

But most importantly, the navigation options should be visible. Hugg.com (http://www.hugg.com) doesn’t follow this guideline. The color of the links has a very low contrast with the white background. The hover-effect isn’t provided.

User image




 Mistake #2: Pagination Isn’t Intuitive
If you have to decide between a quite complex (but beautiful) pagination and a simple one with necessary functionality always prefer the simple solution. If users don’t understand the mechanism behind navigation they won’t be able to use it and therefore won’t use your web-site.

Helium.com (http://www.helium.com) is a perfect example for this mistake. Take a look at the screenshot below: what do the arrows stand for? For the page you’ve already visited or for the page you are currently on? And why does the link to the second page have a white background color? Why do the arrows have different colors? This is unintuitive.

User image



Unintuitive pagination design on Helium.com (http://www.helium.com)

Unintuitive designs result from the lack of structure, hierarchy and well thought-out design decisions. “Blank” pagination is as unintuitive as overcrowded design solution.

User image



Our favourite example: Helium.com (http://www.helium.com)

User image



Not spaced out page links are harder to scan and to navigate through. Make-Believe.org (http://www.make-believe.org/) as an example. The design is unintuitive.


 Creative Solutions Can Be User-Friendly
The more frequently a design element is used, the harder it is for designers to introduce some creative approaches without risking to make the design less intuitive. Consequently, pagination designs have rather a variety of different patterns — revolutionary approaches are used very rarely.

However, creative approaches can be user-friendly. E.g. Dirty.ru (http://www.dirty.ru) uses a slider-based pagination menu; users can drag it to get more available options, that means links to the older pages of the site.

User image





A slider on Dirty.ru (http://www.dirty.ru)

Erweiterungen.de (http://www.erweiterungen.de), the German version of the official Firefox extensions web-site, provides more navigation options once the visitor clicks on the “…”-button.

User image









Further navigation options are displayed once the “…”-button is clicked. Erweiterungen.de (http://www.erweiterungen.de).


 Gallery
Although “standard” pagination — linked blue numbers following each other — is very common for most web interfaces, designers tend to experiment with colors, forms, backgrounds and shapes.

The pagination doesn’t need to look nice aiming to captivate users’ attention; as a part of site navigation it offers users an important functionality and as such has to be used effectively. Still, visual clues can be helpful. In most designs blue and grey colors dominate — colors traditionally used by services.


Simple Enumeration

User image




User image




User image




User image




User image






User image





User image





User image




User image






 Colors and Shapes In Use
Often designers use colors to highlight the current page and separate it from the other pages. The numbers of the pages are also given a shape: a rectangle, a circle or a button. The current page is usually not linked.

User image




User image






User image




User image





User image





User image





User image




User image






User image






User image






User image






User image






User image





User image





User image







User image






User image





User image





User image





User image





User image






User image





User image






User image





User image






User image






User image






User image





User image






User image






User image






User image





User image






User image





User image





User image





User image





User image





User image





User image





User image






 Pagination With Manual Page Input
In some cases users can provide the number of the page they’d like to see manually, via the input-element. This is common for paginations with the limited number of options — e.g. in these designs you can’t jump to the last page if you’d like to.

User image








User image







 Unusual Solutions
User image







User image

2012/01/04 14:44 2012/01/04 14:44
Tag // ,