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 // , , ,



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 //

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 // ,

드래그 앤 드랍의 정의
'우리 모두의 백과사전' 위키백과에서는 Drag & Drop을 어떻게 정의하고 있는지 확인해보았습니다.

드래그 앤 드랍
드래그 앤드 드롭(Drag-and-drop, 끌어서 놓기)은 컴퓨터 그래픽 사용자 인터페이스 환경에서 시각적인 객체를 클릭하면서 다른 위치나 다른 가상 객체로 드래그하는 행위이다.
수많은 종류의 동작을 일으킬 수 있으며, 두 추상적 대상 사이에 다양한 종류의 연결을 만들 수 있다.
기능 동작에 한하여 모든 소프트웨어에 드래그 앤드 드롭을 사용할 수 있는 것은 아니지만 가끔은 사용자가 작업 수행을 하는 데 빠르고 쉽게 배울 수 있는 기술로 쓰일 수 있다.그러나 드래그 앤드 드롭 기능으로의
행동 유도성이 부족하므로 항목을 드래그할 수 있는 여부가 늘 확실한 것은 아니다.[1]
 
출처를 찾아보았습니다.
제이콥 닐슨 아저씨의 이론이었습니다.제이콥 닐슨 아저씨도 worst offenders같은 단어를 사용하면서 Drag&Drop의 사용성에 대해서 부정적으로 말합니다. 반대로 체크박스나 버튼은 Painfully obvious라는 표현을 쓰며 클릭에 유리하다고 말합니다.
Drag-and-drop designs are often the worst offenders when it's not apparent that something can be dragged or where something can be dropped. (Or what will happen if you do drag or drop.) In contrast, simple checkboxes and command buttons usually make it painfully obvious what you can click.

물론 여기에서 말하는 드래그 앤드 드롭의 대상은 컴퓨터입니다.
보통의 OS에서는 아이콘/파일/리스트의 이동, 아이콘 삭제(휴지통으로 드랍)등에 사용되는데, 생각보다 사용빈도가 높지는 않습니다. 이쯤되니 손가락을 이용하는 터치스크린에서는 '더 어렵게 느껴질 수 있다'라는 생각이듭니다.

동작 분석
드래그 앤 드롭의 동작을 분석해보면 크게 세 가지 동작으로 이루어집니다.
Drag&Drop : 오브젝트 누르기(Hold) --> 끌기(Drag) --> 오브젝트 놓기(Drop)
쉽게 말하면 터치한 상태에서 오브젝트를 움직인다음 정지한 상태에서 손가락을 떼는 제스쳐입니다.[http://ashura4.blog.me/130110732530 - [스마트폰] 제스처의 정의와 종류]

손가락을 짧고 가볍게 눌렀다가 놓는 'Tap'에 Drag가 삽입된 형태로 생각하면 이해가 쉬울 것 같습니다.
Drag라는 동작이 하나 추가되었는데 사용성이 떨어지는 것으로 보아, Tap에 Drag가 추가되는 시점에 사용성을
떨어뜨리는 Pain point가 있는 것일까요?

현재 터치스크린에서 드래그앤드랍이 쓰이는 사례 분석

1) 아이폰 리스트 편집
아이폰에서는 리스트 Edit에 일반적으로 쓰이는 기능입니다. Edit 버튼을 누르면 '삭제'버튼이 나타나면서 현재 화면이 보이는데 처음에 보면 우측에 있는 세 개의 선이 어떤 기능을 하는지 알 수 없습니다.
또한 터치로는 반응이 없습니다. Hold를 해야 리스트가 떠오르기 때문에 'Drag&Drop을 통한 리스트 이동'을 인지하기가 어려운 상황입니다.

User image






















2) 아이폰 아이콘 이동 및 그룹핑
아이폰의 경우 아이콘을 이동시키기 위해서 'Long Tap'을 통해 잠금을 해제해야 합니다. 그 이후에 Drag&Drop이 가능한데 아이폰의 경우 아이콘이 살랑살랑 흔들리는 모션을 보여주면서 객체가 이동가능한 상태라는 것을 간접적으로 보여줍니다.(이것도 나이스한 솔루션이라고 생각되지는 않습니다) 이어서 아이콘에 Hold를 하면 아이콘이 떠오르면서 다른 아이콘과 구분이 되고 이동가능한 객체라는 것을 인지시켜줍니다. 그러나 이 상황에서도 x버튼이 더 먼저 보입니다. 클릭이 더 쉽게 행위를 유도하는 것을 간접적으로 보여주는 것 같습니다.

User image






















3) 아이팟 하단 메뉴 Edit
아이팟의 하단 메뉴 편집의 경우 아이콘을 길게 누르면 객체가 공중으로 떠오르는 이미지를 보여줍니다. 공중으로 떠오르는 이미지를 통해 Layer를 구분짓고 아래 Layer에 있는 아이콘과는 구분되게 하여 이동가능성에 대한 어포던스를 높여주고 있습니다. 어포던스를 높이는데 긍정적인 방향이라고 생각합니다.

User image























 정리해보자

1. 인지의 어려움
책의 본분에 언급된 것처럼
터치스크린에서는 '탭(기본동작) 이외의 다른 인터랙션 사용 가능성에 대해, 짧은 시간에 인지하기 어려울 수 있습니다. Tap은 아래와 같은 짧은 동작으로 이루어져 있습니다.
Tap : 오브젝트 누르기 -> 오브젝트 놓기
탭과 달리 Drag&Drop에는 '끌기(Drag)'라는 동작이 추가되어 있는데 이 부분에서 Pain point가 있다고 생각합니다.
끌기(Drag)위해서는 오브젝트를 잡아놓는 Holding이 필요한데 'Holding을 유도하기 위한 어포던스'가 중요 요소로 생각되고 동시에 '이동(Drag)에 대한 어포던스'를 높였을 때 Drag&Drop에 대한 사용성을 높일 수 있다고 생각합니다.
위에 제시한 사례중 2번이나 3번처럼 과감하게 액션을 부여하는 것이 해결책 중 하나라고 생각합니다.

정리하면 [객체를 Touch point에 붙들어 놓을 수 있고(Holding), 이동(Drag)에 대한 행위 유도]를
이끌어내면 Drag&Drop의 사용성을 높일 수 있다고 생각합니다.

2.행위의 어려움
위에서 사례로 제시하지는 않았지만
키오스크같은 큰 화면에서 Drag&Drop하는 것은 실제 이동거리가 커서 물리적으로 사용성을 떨어뜨리는 요소를 가지고 있습니다.

마우스 커서나 모바일기기 핑거 액션은 짧은 거리를 움직이는데 비해서.
화면이 큰 키스크린에서는 물리적인 거리, 화면이동시 딜레이 등 환경요소에 의해 사용성이 떨어지는 경향이 있습니다.
(아이패드만 써봐도  웹페이지 스크롤이 휴대폰만큼 깔끔하게 되지 않습니다)
또한 키오스크가 수직으로 설치된 경우 수직면에서 드래그 하는 건 마우스질처럼 수평면 위주의 드래그에 비해 어렵게 느껴집니다. 그래서 특별히 재미를 위한게 아니라면 키오스크에서는 쉽고 단순한 터치로 가는게 대개의 경우 좋은 선택라고 생각됩니다.
(참조 : pxd 한상택님 의견)

3.학습의 어려움
Drag&Drop에 학습이 되어 있는 유저들은 얼마나 될까? 2011년 9월21일 방송통신위원회가 공개한 자료에 따르면 지난 6월까지 국내 스마트폰 가입자는 1560만9000명이라고 합니다. 대략 국내 총 인구의 33%가 스마트 폰을 쓴다고 가정하고,  그 안에서 Drag&Drop학습이 잘 되어 있는 사람만 추려낸다면 33%를 훨씬 밑도는 수치의 사용자만이 Drag&Drop에 학습이 되어 있다고 추론할 수 있습니다.(여기에 대한 수치적인 자료는 없습니다.한 번 조사해보고 싶네요).

이 추론을 바탕으로 대략 4명중 1명만이 터치스크린 Drag&Drop에 대한 학습이 되어 있다고 가정해봅시다. 결과적으로 4명 중 3명은 터치스크린에서 Drag&Drop에 대한 경험이 없다고 추론할 수 있습니다. 이 정도 수치면 '일반적이지 않은 인터랙션'이라고 해도 될까요? 모바일기기에서 키오스크로 확장시키면 학습도가 더 떨어질 것입니다.

글쓴이 후기
이 블로깅을 통해 단순히 'Drag&Drop 인터랙션이 사용자에게 정말 어려운 동작인가?'를 밝히고 싶었던 것은 아닙니다.
• 터치스크린에서 Drag&Drop은 쉬운 인터랙션은 아니다. (전제)
•그렇다면 Pain Point는 어디에 있을까? (문제점)
•  그 Pain Point를 어떤 방식으로 개선할 수 있을까? (해결방법)를 말하고 싶었습니다.

정리해보니 문제를 던져놓은 수준밖에 안되는 것 같습니다. 단순히 블로그 한 편에 정리될 만한 사안이 아닌 것 같군요.
사용자 조사등을 통해 조금 더 납득할만한 Pain Point를 찾고, 어포던스를 높일 수 있는 방안에 대해 고민을 해본다면 Drag&Drop의 사용성을 높일 수 있는 방법들을 찾을 수 있다고 생각합니다. 개선의 여지가 분명히 있는 만큼 지속적인 관심을 가지고 고민해봐야 할 것 같습니다.



via. http://pxdux.tistory.com

2011/11/03 16:41 2011/11/03 16:41

iconwerk
custom icon + pictogram design for your next project

http://www.iconwerk.de


Zara

User image

0

Cisco Cius

User image

0

Replenish Cleaning System

User image

0

Plantronics

User image

0

Swedish Sea Res

User image

0

School of the Arts, Media and Culture

User image

0

IKEA Kondis iPhone app

User image

0

Scaleable Vector icon System for Cisco. patended

User image

0

Sportpark Mascot

User image

2011/07/05 10:31 2011/07/05 10:31

Touch Gesture Guide

from keep & trend 2011/07/04 10:29
User image
2011/07/04 10:29 2011/07/04 10:29
Tag // , ,
 
0
Payment system through Google phone using NFC(Near Field Communication) technology.
2011/06/22 13:15 2011/06/22 13:15
Tag // ,
 Gradients

User image























 Juvi

User image























 Vibrate

User image























 O

User image























 Earth

User image























 Monoline

User image























 Series

User image


























 Brown

User image























 Dandruff

User image























 Concentric

User image























 Loopys

User image























 Banded

User image























 Comma

User image























 Buckys

User image























 Fruit

User image
























Other Noteworthy Trends


 Back Again

User image










 Isometric

User image










 BlackHole

User image










 Pickup Sticks

User image










 Reactive

User image










 Medallions

User image










via,
http://www.logolounge.com/article.asp?aid=lnPf
2011/06/22 10:57 2011/06/22 10:57


A grad student at MIT's Computer Science and Artificial Intelligence Lab along with a Google employee have developed a system called DeepShot, CNet reports, that makes transferring tasks from desktop or laptop computers to mobile devices such as smartphones and tablets easier, using both transmitted URI information along with the mobile device's camera to take a picture of the task state, enabling a task begun on a computer to be transferred to a phone, and vice versa.

The most obvious example of this would looking up a map online using a home computer, and just taking a picture of the map using a mobile device's built in camera. Using DeepShot to take the picture (which has a corresponding background process running on the home computer), the smartphone or tablet would then switch to the online map, exactly as though the user had begun the process on the mobile device in the first place. Similarly, users can start a task on a mobile phone -- for example, writing an e-mail -- and then take a "picture" of what they are doing, which is then transmitted wirelessly to the home computer, that picks up right where the user left off.

The "trick" behind the technology is that most web applications use a standard format, called the Uniform Resource Identifier (URI) to describe their current states. Running the DeepShot technology on both devices, the URI is transmitted via the picture that is taken, allowing the receiving device to bring itself to the same state.


via, http://www.electronista.com/articles/11/06/16/makes.mobile.transfers.of.data.easier/

2011/06/21 10:42 2011/06/21 10:42
Tag // ,