네이트, 시맨틱 검색을 말하다.

Project/Web 2009. 9. 30. 15:36

네이트가 싸이월드와 통합하면서 많은 변화가 있었다. 회사의 모든 구성원들이 오늘을 준비하기 위해 많은 노력을 한 만큼, 사용자들에게 좋은 영향을 주었으면 좋겠다.

통합을 하면서 여러가지 많은 변화가 있었다. 그 중 하나는 바로 시맨틱(Semantic) 검색이다. 시맨틱은 주어진 단어와 문장의 의미를 파악하고 이를 해석하여 사용자가 찾고자 하는 결과를 추론하는 차세대 검색기술을 말한다. 사람이 이해하는 만큼, 문장의 의미를 시스템이 정확히 파악하기 위해서는 앞으로도 많은 연구와 개발이 필요하겠지만 네이트가 상용화에 첫 발을 내딛게 된 것에 본인은 큰 의미를 두고 싶다.

무엇보다 검색면에 플래시 UI를 도입하게 된 것은 개인적으로 참 의미가 있는 작업이었다. 뒤늦게 프로젝트에 참여하여 팀웍에 적응하는 시간조차 갖지 못하고 빠르게 진행하다 보니 나름대로 고충도 많았던 것 같다. 나의 부족함은 프로젝트에 참여했던 모든 분들이 너그럽게 이해해 주시리라 믿는다.

시맨틱 검색은 크게 검색어 -> 주제분류 -> 추천즉답 이라는 연결 고리를 갖고 있다. 검색 타이틀에 대한 주제분류를 하고 그 분류에 대한 추천즉답을 제시하게 되는데, 주제분류에 따라서는 몰랐던 내용도 알 수 있고, 때로는 재미있는 검색 결과도 볼 수 있다.

예를 들어 “아버지가방에들어가신다” 로 시맨틱 검색을 했을 경우 주제분류인 「예상전망」은 “결국은 아버지 가방에 들어가셨다로 그칠 전망이다.” 라는 결과를 볼 수 있다. 재미있는 결과다.

사실 텍스트 위주의 검색서비스에서 플래시를 UI로 채택한다는 것이 나에게 부담이기도 했지만 좋은 기회일 수 있다는 판단이 더 크게 작용했던 것 같다. 업계의 생리로 본다면 이번 작업은 거의 실시간으로 진행되었다. 이 과정에서 디자이너분이 고생을 많이 하셨는데 그걸 알면서도 시간적 여유가 없다는 이유로 본인이 충분히 배려하지 못한 부분에 대해서는 미안한 마음이다. 이해 하실 거라 믿는다.

정보 표현의 효율성을 생각하며 고민했던 샘플


어떤 일이든 고생한 만큼 의미가 크게 다가오는 것 같다. 이번 프로젝트에 참여하신 모든 분들에게 박수를 보내고 싶다. 본인은 내일부터 또 다른 프로젝트에 매진해야 할 것 같다. 매번 중요하지 않은 프로젝트가 없는 것을 보면 나에게는 큰 행운이다. ^^



    

설정

트랙백

댓글

오랜만에 핸드폰을 바꾸다 - 햅틱

User Interface/Mobile 2008. 5. 21. 19:33

오랜만에 핸드폰을 교체하게 되었다. 풀브라우징과 DMB TV시청이 가능한 햅틱으로 갈아타게 되었는데 실험작이라는 이야기도 있고, 풀 터치스크린 핸드폰으로서 시기상조라는 이야기도 듣게 된다. 물론 아이폰의 국내 상륙 예상과 삼성의 햅틱 차기버전 등을 감안한다면 새로운 UI를 경험하다는 의미에서 좀 이른 감이 없지 않지만 전에 사용하던 핸드폰이 운명을 달리하였기에 어쩔 수 없다는 핑계로 하나 장만하게 되었다.

 

일단 일주일 사용해 본 느낌은 (내가 워낙 오래된 기종을 들고 다녔기 때문일 수도 있다.) 그래도 삼성이 짧은 시간에 노력을 많이 했다는 생각이 든다. 하드웨어(사이즈와 베터리 문제)등으로 인하여 사이즈가 다른 폰에 비하여 상대적으로 크고 들고 다니기에 조심스러운 그립감, 햅틱에서 가장 중요시 하는 감성적 UI(UX)에서도 여러 가지 하드웨어적인 제한적 요소로 인하여 모션감이 부자연스럽다는 것도 약간의 아쉬움으로 남는다. UI 구조에 있어서도 약간의 아이러니한 부분들도 간혹 보이기도 한다. 한 마디로 사용하기 편리하다기 보다는 기존의 버튼 형태보다는 메뉴 조작에 재미를 느낄 수 있다.

 

그러나 이런 문제들이 있기는 하지만 앞으로 핸드폰의 발전 방향의 하나의 라인을 형성하게 되었다고 볼 수 있을 듯싶다. 풀터치스크린 방식의 핸드폰을 쓰다가 과연 일반 버튼 기반의 핸드폰으로 돌아갈 수 있을지는 좀더 지켜봐야 하겠지만 지금으로서는 어려울 수도 있을 것 같다.


앞으로 IT 발전은 휴대성과 감성적 UX에 대한 필요성이 많을 것으로 본다. 그런 흐름에서 가장 유력한 용의자는 휴대폰이 아닐까 싶다. 그러나 돈을 버는 사업은 직접적인 휴대폰 기기 보다는 그 기기를 통해서 서비스될 것들이 아닐까


사용자 삽입 이미지



햅틱폰 배경화면 >>
사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지 사용자 삽입 이미지

사용자 삽입 이미지 사용자 삽입 이미지


    

설정

트랙백

댓글

사용자 경험과 관계- Powers of Information

User Interface/Web 2008. 4. 13. 04:15
일본의 한 미술관 매점 단말용 컨텐츠로 제작된 사이트라고 한다. 단말기의 최소 해상도가 1920x1080이기 때문에 그 이하 해상도에서는 짤려서 보이고, 로컬에서 서비스되기 때문에 로딩 처리가 되지 않아서 이미지가 뜨기까지는 약간의 시간이 필요하다.

심플한 디자인과 절묘하게 어울리는 효과음이 전체적으로 사이트의 느낌을 살리고 있다. 가장 훌륭한 점은 정보 설계로부터 플래시 컨텐츠의 효과를 1:1로 적절히 사용했다는 점이다.

사용자 경험은 관계에 영향을 많이 받는다고 생각한다. 여기서 관계라는 의미는 연결을 의미하는데, 예를 들면 화면 밖에 있는 오른쪽 이미지를 보기 위해 현재 이미지를 왼쪽으로 밀어서 사라지게 하는 행동은 우리의 머리 속에서 현재 사진과 오른쪽 사진은 보이지 않는 선으로 연결되어 있고 화면에 보이는 사진을 왼쪽으로 보내면 오른쪽에 있는 사진이 나타날 것이라는 추측에서 비롯된다. 이 사이트의 경우도 뎁스의 트리형태 정보구조를 표현함에 있어서 틀 속에 틀이라는 형태로 진행하고 있어서 정보의 전달이 명확하다고 볼 수 있다.

다만 아쉬운 점은 각 뎁스별 현재 위치(컨텐츠 그룹명)에 대한 정보 전달이 화면 모션으로만 이루어지고 있어서 사용자가 기억하고 있어야 한다는 점이다. 왼쪽의 Power of Information 텍스트를 일률적으로 할게 아니라 각각의 뎁스에 따라 정보구조명을 적용했더라면 하는 생각이 든다.

http://kiki.ex.nii.ac.jp/powers_of_information/

사용자 삽입 이미지

    

설정

트랙백

댓글

youtube의 동영상 플레이어 업그레이드

User Interface/Web 2008. 4. 6. 22:47
오늘 youtube의 동영상 플레이어를 보면서 풀스크린 화면에서 왼쪽 플레이 버튼  옆에 새로 생겨난 버튼을 클릭해 보니 새로운 관계형 UI가 업그레이드 되어 있다. 동영상 플레이어에 해보고 싶은 기능이었는데...















사용자 삽입 이미지

    

설정

트랙백

댓글

UI&C(User Interface & Communication) Lab을 끝맺음 하며...

Project/UI&C Lab 2007. 6. 22. 12:43
그 동안 ActionScript 2.0으로 UserInterface & Communication Lab(UICLab)을 진행하였던 작업물을 압축파일로 올려놓는다. 평소에 생각하던 아이디어나 기술적인 부분을 테스트 하기 위해 오프라인에서 진행하였으나 이제는 오프라인에서 진행하는 의미가 없어졌고 기술적인 진보를 위하여 이쯤에서 UICLab을 끝맺음 하고 앞으로는 시급한 사항이 아닌 이상은 ActionScript 3.0로 작업을 진행할까 한다.

차기 UICLab은 AS3 공부를 위한 아주 기초적인 것에서부터 시작할 듯 싶다. 오프라인에서 진행을 할지 아니면 블로그의 infinite 메뉴에서 진행할지는 앞으로 생각해 봐야 하겠다.

사용자 삽입 이미지


제작된 결과물에 대한 내용은 압축파일을 풀고 실행파일을 실행하면 왼쪽 메뉴 왼쪽에 중간에 나와있는 버튼을 클릭하면 상세하지는 못하나 결과물에 대한 설명을 볼 수 있다. 버튼 가독성이 떨어져서 버튼의 위치는 위 이미지에 표시해 놓았다.

아무쪼록 플래시를 시작하시는 분들에게 재미있다는 느낌이 전해졌으면 좋겠다...

UIClab.zip



    

설정

트랙백

댓글

Flickr Searcher 1.8 업로드

Project/Programming 2007. 5. 13. 13:49

사용자 삽입 이미지


사용자 삽입 이미지

사용자 삽입 이미지


Flickr의 Open API를 이용한 사진 검색 어플리케이션 'FlickrSearcher'
version 1.8

http://dicaland.cafe24.com/flickr/FlickrSearcher1_8.swf
====================================================================================================

FlickrSearcher1_8.exe

Version 1.8  Release date : 2007/05/13
Change log
1. photo 썸네일 클릭시에 나타나는 왼쪽 중앙에 있는 information 버튼의 가독성을 위하여 색 변경
2. Search history 기능 추가 : 특정 모드(tags, name, email, nsid)를 통해 검색한 history를 저장할 수 있도록 함.
(최근 검색한 검색어와 페이지 수를 통해서 되돌아 갈 수 있도록 함)
====================================================================================================


    

설정

트랙백

댓글

Flickr Searcher 1.7 업로드

Project/Programming 2007. 5. 10. 11:45
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

Flickr의 Open API를 이용한 사진 검색 어플리케이션 'FlickrSearcher'
version 1.7

====================================================================================================
Version 1.7  Release date : 2007/05/10
Change log
1. 1.6에서 'VIEW AUTHOR PHOTOS'로 검색을 할때 search mode 'name'으로 이동하면서 textField 길이가 불규칙하게 변했던 버그 수정.
2. 정보 TextField를 선택가능 하도록 변경.
3. Photo Information에서 이미지의 exif 정보를 볼 수 있도록 기능 추가.
====================================================================================================
    

설정

트랙백

댓글

손을 움직여 음악 재생

User Interface/Etc 2007. 4. 17. 04:20
사용자 삽입 이미지

MIT 미디어 랩실














MIT 미디어 랩의 마에다 교수의 제자인 James와 Ben이 개발한 AudioPad는 다양한 비트음을 체스를 두듯이 서로간의 관계를 형성하면서 음의 크기와 파장을 만들어 낸다.

이러한 UI는 제퍼슨 한의 GUI 동영상에서 보았듯이 앞으로의 유비쿼터스의 발전 방향을 제시해 주고 있으며 지금도 많은 미디어 분야에서 비슷한 형태의 제품들이 나오고 있다.

현재는 새로운 개념으로 신기한 놀이라는 생각이 지배적이지만 앞으로 이러한 UI 형태가 생활 속에서 편리함과 즐거움을 준다는 것이 입증된다면 우리의 삶은 지금과는 많은 부분이 바뀌어 있을 것이다.

마에다 교수의 아버지는 장인정신으로 두부를 만들던 분이셨다고 한다. 아버지로부터 ‘기본과 전통을 이해하지 못하고는 새로운 것은 없다’라는 가르침을 받았다고 한며, 디지털 아티스트로도 많은 활동을 하고 있는 듯 하다. 마에다 스튜디오에 가면 그만의 세계를 조금이나마 엿볼 수 있을 듯 싶다.

사용자 삽입 이미지



-----------------------------------------
MIT의 오디오패드 유비쿼터스 패러다임에 있어 단순히 멋져 보이고 아주 신기한 기술만이 유비쿼터스 기기들은 아니다. 이는 융통성 있게 사용자에게 편리함과 단순성을 제공해야 한다. 대부분의 사람들은 채널 또는 볼륨 조절을 하기 위해 리모컨을 찾거나, TV 또는 비디오 앞까지 가서 버튼을 눌러서 자신이 원하는 메뉴를 찾아 누르게 된다. 그리고 DJ들이 새로운 음악을 믹싱하기 위해서는 물리적인 디스크를 가지고 스크래칭을 하게 된다. 하지만 유비쿼터스 환경에서는 볼륨 조절하는 것조차도 예술로 승격시킬 수 있다.

유비쿼터스는 인간과 가장 밀접한 예술로부터 시작하게 된다. 이 세상에는 피카소, 고흐와 같은 매우 어려운 예술 작품이 존재하는 반면, 쉽게 접할 수 있는 벤츠와 같은 멋진 디자인들이 존재한다. 인간이 보기에 멋있고, 만져보고 싶고, 즐기고 싶은 것이 바로 유비쿼터스의 첫 발검음이 될 수 있다. 인간과 가장 밀접한 관계에서 시작하여 예술로 승화되는 제어 컨트롤이 오늘 소개하게 될 미래의 버튼이다. James와 Ben은 MIT에서 존 마에다 교수의 제자로서 컴퓨터 인터페이스 기술을 예술로 표현하는 방식으로 기술들을 구현하고 있다.

존 마에다는 미국 MIT 미디어 랩의 교수로 21세기에 르네상스 시대를 기술적으로 표현하고 구현하고 있는 사람 중 한 명이다. MIT 미디어 랩의 James와 Ben 두 사람이 개발한 AudioPad는 앞으로 등장할 음악관련 기기들의 유비쿼터스 환경을 예시하게 된다. 이는 안테나 매트릭스가 내장된 비디오 프로젝터와 라디오 송수신 기능을 갖는 '퍽'의 결합을 통해 전혀 새로운 인터페이스를 제공한다.

사용자가 마치 장기 또는 체스를 움직이듯이 이러한 버튼을 작동시키며 다양한 인터페이스를 체험할 수 있게 된다. 실제로 AudioPad가 작동하는 환경을 보게 되면 매우 경이롭다는 느낌이 든다. 이는 '마이너리티 리포트'에서 나온 장면 보다 예술적인 면을 느낄 수 있다. '공학에 대한 접근 없이 컴퓨터 아트가 가능한 것인가'라는 질문을 가질 수가 있을 텐데 이는 마에다 교수가 추구하고 있는 것이기도 하고, 그의 제자들이 끊임없이 이끌고 있는 한 부분이기도 하다. 이는 유비쿼터스가 단순히 기술만으로 이루어져 있다는 틀을 깨는 개념을 제시한 예술적인 기술이다. 아마도 이에 대한 구현 방식이나 기술은 유비쿼터스 관련 세미나를 참석하면 볼 수 있을 것이다.

출처 : U Dream 유비쿼터스 드림 본문중(원문 : MIT 미디어 연구소)

    

설정

트랙백

댓글

루이까또즈 브랜드 사이트

Project/Web 2007. 3. 27. 00:48
사용자 삽입 이미지

루이까또즈 브랜드 사이트의 장점
루이까또즈는 사용자 중심으로 설계하려고 노력했다.
 
사용자 삽입 이미지

기본적으로 메뉴 구조라고 한다면 위와 같이 단일 메뉴, 순차적 메뉴, 트리 메뉴, 네트웍 메뉴 등으로 나눌 수 있을 것이다. 각각 특정 메뉴로 접근하는 방식에 차이가 있다. 웹은 기본적으로 이러한 여러 가지 메뉴 구조를 복합적으로 사용하고 있는데 루이까또즈는 이러한 메뉴구조를 좀더 다른 방식으로 접근한 형태이다.

루이까또즈의 경우는 기본적으로 트리 메뉴구조를 가지고 있으며 네트웍 메뉴 구조로 접근이 가능하다. 이를 다른 형태로 표현하면 아래와 같은 형태로, 사용자는 원하는 특정 페이지로 다이렉트 접근이 가능하다.
 
사용자 삽입 이미지

이런 형태는 자칫하면 사용자가 현재의 위치를 파악하지 못하는 문제점이 발생할 수 있는데 루이까또즈는 이러한 문제점을 해결하기 위해서 사용자가 새로운 페이지로 접근을 시도할 때 하나의 규칙을 만들었다.
 
사용자 삽입 이미지

SiteMap을 보면 1뎁스와 2뎁스 모두를 세로 직렬로 배치하여 현재 위치에서 원하는 페이지로 이동할 때 컨텐츠들은 위에서부터 아래로 정렬되어 있다는 것을 사용자가 학습할 수 있도록 모션을 적용하였다.

예를 들면 현재 AD CAMPAIGN에서 HISTORY 메뉴로 이동시 현재 컨텐츠는 위로 올라가고 HISTORY 컨텐츠는 아래에서 위로 올라오게 된다. 반면 HISTORY에서 WEBZINE 페이지로 이동시에는 현재 페이지는 아래로 내려가고 WEBZINE 페이지는 위에서 아래로 내려오게 함으로써 사용자가 현재 위치에서 원하는 위치로 이동할 때, 현재의 위치를 파악할 수 있도록 하였다.

로딩바의 형태도 이러한 규칙의 일환으로 위에서 내려오는 컨텐츠의 로딩바는 아래에서 위로, 아래에서 올라오는 컨텐츠의 로딩바는 위에서 아래로 채워지게 된다.

루이까또즈에서 가장 중요한 컨텐츠인 Collection은 로딩의 순서가 왼쪽에서 오른쪽으로 이루어지며 전체 로딩이 어느 정도 진행되었는지를 사용자가 알 수 있도록 메뉴 아래에 상태를 표시하고, 사용자가 특정 메뉴의 이미지를 먼저 보기위해 접근을 시도하면 해당 이미지를 개별적으로 로딩함으로써 사용성을 높이고자 했다.

루이까또즈 브랜드 사이트의 구조는 아래와 같은 형태로 사용자가 인지할 수 있을 것이다.
 
사용자 삽입 이미지


사이트의 단점
루이까또즈는 사용자 중심의 UI로 접근을 하였기 때문에 페이지 전환시 획일적인 모션 적용으로 인하여 다소 각 컨텐츠의 재미요소가 미흡한 단점이 있다. 이는 각 페이지로 넘어갔을 때 그 페이지에 고유의 모션을 통해서 어느 정도 해소할 수는 있겠으나 그런 과정에서 기존의 컨셉트에 부합되지 않는 문제점도 발생할 것으로 예상된다.

* 정해진 일정으로 빠듯하게 작업을 진행하였으나 클라이언트의 자료수급이 제때 이루어지지 않아 오픈 시일이 연기되었고, 클라이언트의 개인적인 취향에 따른 수정과 일관성 없는 요구사항으로 인하여 전체적인 컨셉트를 훼손하는 결과를 낳았던 것 같다.

항상 이런 부분들은 아쉬움을 남기지만 갑과 을의 관계에서 진행되는 프로젝트이므로 어쩔 수 없는 아쉬움이 아닌가 싶다.

http://www.louisquatorze.co.kr/

    

설정

트랙백

댓글

2012년 디지털기기

User Interface/Etc 2007. 3. 24. 13:12
2012년 디지털기기엔 과연 어떤 변화가 있을까?

22일 '모바일 이노베이션즈 투어(Mobile Innovations Tour)'라는 주제로 서울서 열린 한국HP의 기자간담회에서 최고디자인책임자(CDO)인 스테이시 울프 이사는 “미래 모바일 환경은 통합적인 복잡함에서 벗어나 개별적인 단순함을 지향하게 될 것이며, 언제 어디서나 연결이 가능한 IT제품들이 등장하게 될 것”이라고 말했다.

"복잡한 기능을 갖춘 디지털 제품을 남녀노소 가리지 않고 능수능란하게 사용할 수 있다"(사용의 간편함)

"MP3 플레이어, 휴대용 HDD, 노트북, 디지털 카메라 등 각종의 기기들을 모두 들고 다니는 수고를 덜 수 있다. PC 모니터와 TV 등 비슷한 기능의 제품을 따로따로 마련할 필요가 없다."(기기간의 통합)

"언제 어디에서든 내가 원하는 데이터를 검색할 수 있고 서비스 받을 수 있다"(연결성의 극대화)

이것이 바로 HP가 제시한 미래 디지털 제품의 모습으로 스테이시 울프 이사는 이를 두고 ‘극도의 단순함’이라고 표했다.
사용자 삽입 이미지
[사진=HP]전시장 도우미들이 가상의 전시 모델들을 들고 있다

이 같은 주장의 이해를 돕기 위해서 스테이시 울프는 ▲무선 게이트웨이용 손목시계 ▲종이같은 두께의 디스플레이 매트▲씬 클라이언트를 장착 식탁▲다양한 방식의 정보 입력 기능을 제공하는 전자 펜▲인터넷 뱅킹이 가능한 디지털지갑 ▲데이터 베이스와 충전기 역할을 하는 스마트진열대 등의 가상의 제품을 모형으로 선보였다.

손목시계 형태인 개인용 무선 연결장치는 전화와 노트북, 라디오, TV 등의 다양한 기기를 조작하는 중앙 종합연결센터 역할을 한다.

장소와 시간에 관계없이 종합연결센터와 손목시계에 접속할 수 있는 '매트'는 평소 둘둘 말아서 가방에 넣고 다닐 수 있다. 이 매트는 큰 화면에 적합한 게임이나 기타 컨텐츠로의 접속이 용이하다.

씬 클라이언트를 장착할 경우 상단이 화면으로 바뀌는 식탁도 보는 이들의 시선을 사로잡았다. 씬클라이언트는 식탁뿐만 아니라 평면의 가구나 바닥 어디에든 적용할 수 있다.

또한 지금보다 더욱 납작한 형태의 터치스크린 태블릿 PC도 선보였다. 식탁과 일체형인 모델도 기대해 볼 수 있다고 한다.

길거리에서 바로 송금이 가능한 디지털 지갑은 금융거래의 모든 기록을 저장해 확인할 수 있으며, 각종 신용카드와 현금카드 등을 따로 발급받을 필요가 없다.

또 정보공유와 전시가 가능하며, 충전기 역할도 하는 '스마트 진열대'는 실용성 측면에서 참가자들의 높은 점수를 받았다.

스테이시 울프는 이날 발표회에서 "디자인 혁신은 미적 요소와 기능 사이에 균형을 유지하면서 최종 사용자에게 중요한 의미를 부여할 수 있어야 한다."라며 "우리의 목표는 개인과 기업에게 직관적이며, 기쁨과 안정성을 제공하는 모빌리티 제품을 개발하는 것"이라고 강조했다.

출처 : 류준영 기자   ( ZDNet Korea )
-----------------------------------------------------------------------------------
"디자인 혁신은 미적 요소와 기능 사이에 균형을 유지하면서 최종 사용자에게 중요한 의미를 부여할 수 있어야 한다."

위 이 말은 현 IT산업계에서 가장 어려우면서도 해결해야 하는 과제가 아닌가 싶다. 현재 우리나라의 IT업계에 종사하는 사람들의 환경은 그 어느 나라를 보더라도 열악한 환경이라는 생각이 든다.

실 사용자의 눈높이에 맞추기 보다는 어떠한 프로젝트를 며칠까지 완료하여 시판할 것인가에 온 신경을 쏟고 있는 듯 하다. 그러다 보면 고위 관리직에 있는 사람의 눈높이에서 기능 리스트를 만들고 그 기능리스트를 가지고 제작자와 협상을 하며(대부분의 협상 또한 기능 위주로 흐른다) 절대적으로 수정할 수 없는 최종 완료일을 향해 내달린다.

이런 작업 프로세스로 얻을 수 있는 것은 멋들어지고 엄청나게 많은 기능들의 집합체, 누구도 흉내낼 수 없는 그 복잡함이다.

인터랙션 디자이너인 스콧 맥그리거는 이러한 기능 중심적 개발 마인드가 얼마나 어리석은 일인지를 증명하기 위해서 그의 강의에서 멋진 실험을 수행했다고 한다. 그는 기능 리스트로 어떤 제품을 묘사하면서 학생들에게 즉각적으로 상상할 수 있는 제품의 명칭을 적으라고 했다.
    1)    내연기관,
    2)    고무 타이어가 달린 네 개의 바퀴
    3)    엔진과 구동 바퀴를 연결하는 트랜스미션
    4)    금속 골격 위에 설치된 엔진과 트랜스미션
    5)    운전대의 순서
이런 기능들의 나열로 말하려고 하는 그것을 묘사했다. 이쯤이면 학생들은 모두 자동차라고 떠올리며 적기 시작할 것이었다. 스콧 맥그리거는 이런 기능 나열을 멈추고, 그 대신 사용자의 목표를 몇 가지 언급했다.
    6)    잔디를 쉽고 빠르게 자를 수 있음.
    7)    앉아 있기 편리함
처음 5가지의 기능만을 듣고는 어떤 학생도 ‘좌석이 있는 잔디 깎는 기계’라고 적지 못했을 것이다. 이것만 보아도 기능보다 사용자 목표가 얼마나 더 제품을 잘 설명하는지 알 수 있다. (정신병원에서 뛰쳐나온 디자인 본문 중 부분 발췌)

비주얼 베이직의 아버지라고 불리는 앨런 쿠퍼는 제품을 만들기 위해서는 기능 위주의 개발보다도 사용성과 사용자의 목표를 반영하는 디자인이 우선되어야 한다고 강조한다. 기능 위주의 개발을 먼저 하게 되면 실 사용자를 위한 사용성과 그 목표를 잃어버린다는 이야기다.

사실 우리는 알게 모르게 엄청나게 복잡한 형태의 프로그램과 제품들을 사용하고 있다. 엄청나게 복잡한 형태가 아니더라도 우리가 충분히 그 기능에 대해 유추할 수 있는 상식을 벗어나 사용자가 전혀 예상하지 못한 결과를 가져오기도 한다. 이러한 문제점들은 대부분 기능 위주의 제품생산으로 비롯된다. 사용자가 원하고 필요로 하는 기능들이 별로 중요하지 않은 수많은 기능들에 묻혀서 쉽게 찾을 수 없거나 상식적인 로직의 흐름을 방해하는 요인으로 작용한다. 아날로그에서 디지털로 넘어오게 된 배경은 우리의 생활을 좀더 편하고 좀더 쉽게 개선하기 위함을 잊어서는 안될 것이다.

앞으로는 디자인이 산업 전반에 중추적 역할을 할 것이다.(지금도 많은 분야에서 개선을 하고 있다) 디자인이라는 것은 보여지는 것, 그 이상의 가치와 의미가 있다.


    

설정

트랙백

댓글

오피스 2007 새로운 UI 설계의 목표와 원칙

User Interface/Etc 2007. 2. 22. 21:03

새로운 UI 설계 목표
마이크로소프트의 오피스 사용자 경험팀의 리더인 해리스가 밝힌 새로운 오피스 UI의 설계 목표는 다음과 같다.

1. 사용하기 쉬워야 한다
2. 사람들이 시간을 절약할 수 있게 한다
3. 오피스에서 사람들이 필요한 기능을 쉽게 찾을 수 있게 한다
4. 보기 좋은 문서를 작성할 수 있게 한다

새로운 UI 설계 원칙
오피스 12  UI 의 목표를 달성하기 위한 UI 설계 원칙은 다음과 같다.

결과 지향
사용자가 오피스를 사용하는 이유는 오피스의 UI 자체를 사용하는 것이 아니라 오피스를 통해서 필요한 결과를 얻기 위해서이다. 따라서 오피스는 기능 중심이나 명령어 중심의 UI 가 아니라 사용자가 오피스를 이용해서 달성하고자 하는 최종 결과를 효율적이고 효과적으로 얻을 수 있어야 한다.

정황 집중
오피스는 수 천가지의 기능을 가지고 있지만 정작 사용자가 필요로 하는 기능을 찾기는 쉽지 않다. 그런데 사용자가 어떤 작업을 할 때 오피스에서 제공하는 모든 기능이 한꺼번에 필요한 것은 아니다. 왜냐하면 어떤 작업에 대해서 관련된 작업은 정해져 있기 때문이다. 따라서 사용자가 어떤 기능을 사용할 때 사용자가 선택해야 하는 수를 줄이기 위해 사용자의 작업 정황에 집중해서 그 상황에서 필요로 하는 기능을 제공한다.

효율적인 접근
사용자가 필요로 하는 기능을 오피스 메뉴 체계 안에서 효율적으로 접근할 수 있게 한다. 자주 사용하는 기능들은 사용 빈도가 낮은 것 보다 더 빨리 접근해서 사용할 수 있게 한다.

똑똑한 UI 보다는 직접적이고 일관성 있는 UI
사용자가 기능을 호출하지 않았는데도 오피스가 알아서 뭔가를 하는 것은 똑똑한 UI 는  오히려 사용자에게 방해가 되는 경우가 많다. 오히려 사용쟈의 오피스에 대한 통제권을 잃게 만든다. 따라서 오피스가 알아서 하는 똑똑한 UI 보다는 사용자가 직접적으로 사용할 수 있게 하고, 기능의 위치도 여기저기에 있는 것이 아니라 일관성 있게 한 곳에 고정되게 한다.

이러한 사례는 UI 에 대해서 문제와 해결 방법을 배울 수 있는 정말 찾기 힘든 사례이다. 이 사례를 잘 배워두면 다른 제품을 개발할 때에도 유용하게 이용할 수 있다.

출처 : dobiho님

    

설정

트랙백

댓글

매출이 떨어진다면「UI를 바꿔라!」

User Interface/Etc 2007. 2. 21. 11:14

인터넷 기업이 매출을 올리는 방법은 많은 사람들을 끌어들이는 것이다. 그리고 이들에게 유용한 정보를 쉽게 전달함으로써 상품을 판매하거나 광고 매출을 올리게 된다. 정보를 쉽게 전달한다는 것은 콘텐츠에 대한 접근성을 높이는 것으로 유저 인터페이스(UI)의 중요성은 재차 언급할 필요가 없다.

보다폰이 중, 장년층을 겨냥해 내놓은 심플리의 성공요인은 다양한 부가서비스를 생략하고 통화기능을 내세운 것, 그리고 디스플레이 가독성을 강화한 것이다. 특히 이 제품의 액정에는 어떠한 아이콘도 없고 텍스트만이 보일 뿐이다. 보다폰은 심플리의 성공적인 UI로 45세 전후 고객들의 마음을 사로잡았으며 유럽에서 선풍적인 인기를 끌며 실버폰 열풍을 확산시킨 바 있다.

또 하나 해외의 사례를 들면, 오래된 건물을 인수해 백화점으로 개조한 한 회사는 엘리베이터가 한 개 밖에 없어 고객들로부터 끊임없는 불만을 들어왔다. 건물구조상 추가로 엘리베이터 설치는 불가능했지만, 고심 끝에 적은 비용을 들여 고객들의 불만을 일순간 잠재울 수 있었다. 주변에 수많은 거울을 설치함으로써 고객들의 주위를 분산시킨 것이 해답이었다. 물리적으로 불가능한 것을 심리적으로 해결한 것이다.

위 사례와 같이, 인터넷 기업의 웹사이트 역시 가독성 강화와 심리적인 부분을 십분 활용한 UI를 개발하는 것이 매출을 증대시키는 기본 요인이 될 것이다.

우수한 UI는 인간 심리와 4관에 충실해야

지난 20일 랭키닷컴이 개최한 ‘유저 스페이스 컨퍼런스 2006’에서 경희대학교 커뮤니케이션연구소 소장인 김태용 교수는 웹사이트에서 UI의 중요성에 대해 설명했다.

UI개발 프로세스에서 중요한 것은 시스템(웹사이트)에 대한 개발자의 인식과 이를 사용하는 사용자의 일치하는 정도인 ‘객관적 일치도’를 비롯해 ‘주관적 일치도’와 ‘정확도’ 등 사용자와 개발자의 상호지향성이다. 즉, 편지봉투 모양의 메일 아이콘에 대해 누구나가 ‘저건 메일이구나’라고 생각이 일치하는 데에서 UI설계가 시작된다는 것이다.

김태용 교수는 “우수한 UI를 만들기 위해서는 직관, 객관, 일관, 미관 등 ‘4관법’만 잘하면 된다. 어떤 서비스나 제품에 대한 사용설명서는 직관, 객관, 일관적이지 못하다는 잘못에 대해 사용자에게 용서를 구하는 사과문이다”라고 말했다.

여기서 말하는 4관은 ▲ 직관 : 학습 없이 짐작으로 통하는 UI가 가장 우수한 것이다. ▲ 객관 : 널리 통용돼 설명이 필요 없는 UI ▲ 일관 : 시스템 내부적으로 일관성이 확보된 UI, 잦은 변화로 매번 학습이 필요한 UI는 좋지 않음 ▲ 미관 : 같은 구조라면 아름다운 UI 등 네 가지이다.

또한 우수한 UI는 인간의 심리를 이용해서 만들어 졌을 때 큰 효과를 발휘할 수 있다. 웹사이트를 새로 만들거나 개편할 경우, 콘텐츠 구성과 사이트 맵 설계에 앞서 심리적/생물학적인 인간의 본성을 이해하는 것이 중요하다.

시각적 원리를 이용해 콘텐츠 배치

인간의 본성을 이용한 UI 설계는 인터넷 사이트의 특성 상, 시각의 원리를 이용하는 것이 기본이 된다. 포털 사이트들이 강조하고자 하는 콘텐츠를 좌측 상단이나 가운데 상단에 배치하는 것도 이러한 본성을 활용한 것이다.

실제 포털 사이트들의 검색 광고는 상단이냐 아니냐에 따라 광고비에 큰 차이가 있으며, 쇼핑몰의 경우도 주요 이벤트를 상단 가운데 자리에 위치시키고 판매자에게 더 많은 수수료를 챙기기도 한다.

인터넷 브라우저 상에서 상하, 좌우의 특정 지점에 대한 시각 반응을 분석해 보면, ▲ 좌우 양 지점에 대한 첫 응시율(사용자가 바라보는 비중)은 왼쪽 73%, 오른쪽 27%이다. ▲ 상하의 첫 응시율은 위쪽 69%, 아래쪽 23%로 조사됐다. ▲ 그리고 좌우에 상관없이 대각선으로 양쪽 지점을 잡더라도 아래쪽보다는 위쪽이 월등하게 높은 응시율을 나타냈다.

이러한 패턴을 종합한 결과 인간이 브라우저를 바라보는 본능적인 시선의 움직임에 가장 적합한 사이트 구성은 첫 번째 좌측 상단에서 시작해 우측으로 진행해 내려오는 ‘시계방향” 구성이 가장 뛰어나며, 가운데 상단에서 시작해 다시 왼쪽으로 갔다가 시계방향으로 보는 구성이 두 번째라는 것이 김교수의 설명이다.

‘감’ 보다 ‘과학’

콘텐츠 위치, 구성이 곧 매출과 직결되는 인터넷 사이트에서는 사용자(고객)과의 접점인 초기화면 UI가 무엇보다 중요하다. 장기적으로, 우수한 UI가 반영된 웹사이트로의 개편 여부에 따라 기업의 매출이 큰 폭으로 변할 수도 있는 것이다.

때문에 대형 사이트들은 이미 UI에 대한 중요성을 인식하고 내부조직을 갖추고 있다. 일례로 네이버는 100명이 넘는 UX(User Experience)센터를 운영하고 있으며, 다음은 주요 서비스 별로 UI조직을 운영하는 동시에 신규서비스 론칭에 따라 TFT를 운영하고 있다.

네이버의 한 관계자는 “사이트 개편 등 변화가 생길 때면 수십 명의 이용자를 대상으로 수차례 테스트를 진행한다. UI가 조금만 바뀌어도 클릭 수에 엄청난 변화를 보이기 때문에 감이 아닌 과학적이고 체계적인 운영이 반드시 필요하다”고 말했다.

동서리서치 UI LAB에서 조사한 결과, 인터넷 중앙일보(조인스닷컴)과 조선일보의 헤드라인 가독성 면에서 좌측상단에 위치한 중앙일보보다 가운데 상단에 위치한 조선일보가 더 뛰어나다는 내용도 있듯이, 반드시 위에 설명한 이론이 정확한 것은 아니다.

그렇지만 UI는 인터넷 기업 매출 활동의 최전방 접점이라는 점에서 체계적(Systematic)으로 만들어 놓아야 할 것이다. 이제는 단순히 디자이너에 의존하기 보다, 모든 구성요소를 포괄하는 하나의 총체적 시스템으로 기획해야 하고, UI 관련 직무분석에 따른 프로세스 정립도 필요하다.

또한 기존 오프라인 광고나 PR 분야에서 이루어 지던 ROI 평가처럼, UI 개편에 따른 ROI 평가/분석 체계의 수립도 요구돼야 할 때이다. @


출처 : 김효정 기자 ( ZDNet Korea )

    

설정

트랙백

댓글

UI디자인 가이드라인 - 사이트 구성하기

User Interface/Web 2007. 2. 21. 11:10

링크의 품질을 높이는 방법
사용자에게 자신감을 부추기고 자신이 찾고자 하는 정보의 향기를 전달하는 방법의 반은 링크에 의해 만들어진다.
또한 자신감은 링크 타입, 커뮤니케이트된 정보의 양, 링크가 생긴 모양에 의해 부추겨지는 수가 많다.

링크의 분류는 다음과 같이 나눌 수 있다.

- 컨텐츠 링크 : 컨텐츠를 포함하는 페이지로 간다.
- 카테고리 링크 : 다른 링크의 우선적으로 포함하는 페이지로 간다.
- 키워드 링크 : 검색의 부분으로 사용자가 입력하는 것이다.
- 백 혹은 홈 링크 : 홈이나 먼저 방문한 페이지로 간다.

위의 분류 중에서 컨텐츠 링크가 가장 좋은 방법이다. 사용자들은 카테고리 링크가 아니라 컨텐츠 링크를 사용할 때 더 성공할 가능성이 높다. (현재 국내의 사이트는 카테고리 링크가 더 많다.) 백, 홈 링크는 문제의 징조이기도 하다. 사용자가 향기를 놓쳤을 경우 많이 사용하기 때문이다.
링크들은 사용자들을 끌기 위해 올바른 단어들을 가지고 있어야 한다.(링크를 신호로 만드는 방법)


링크를 신호로 만드는 방법
문법적으로 정확한 문장은 정보를 찾기 어렵게 할 경우가 있다는 조사 결과(제이콥 닐슨 Alert Box 1997. 10.1 'How users Read on the Web)가 있다.
컨텐츠의 문장을 읽어가는(Scanning) 사용자는 그것을 신호와 잡음으로 구분하는데, 자신이 원하는 정보와 관련된 단어의 링크를 신호로, 그 밖의 내용은 그저 잉크인 잡음으로 보는 것이다. 보통 20개의 단어 중 4-5단어들(20%)은 신호, 나머지는 잡음이라고 간주 한다.
따라서 링크 안의 큰 잡음들은 관련 텍스트를 숨긴다.

링크는 커뮤니케이트 하기 위해 충분한 단어들을 가지는 것이 필요하다.
같은 목적을 가진 사용자들 이라도 사용자가 다르면 다른 단어를 찾을 수 있다.
예를 들어 취업을 원하는 사용자가 찾는 단어들을 살펴보면 어떤 이는 '이력서 올리기', 또 다른 사람은 'Job찾기', '구직', '일자리' 등… 사용자들은 동의어를 핸들 할 수 있지만 그것은 문맥 안에서 만 가능한 것이다.
그러므로 링크는 밑줄 쳐진 단어들과 그와 관련된 텍스트 둘 다 라고 할 수 있다.

그러므로 카테고리 링크가 더 어려운 일이다.
그 이유는 복수 링크들을 설명(묘사)해야만 하고, 보통 컨텐츠 링크 사이즈의 3분의 1정도 밖에 되지 않기 때문이다.

그렇다고 링크의 길이가 길어야 좋은 것은 아니다. 사용자의 선택을 도울 의도로 된 텍스트(제목들도 어떤 때는 포함)를 올바르게 디자이너가 결정해야 한다.


스캐닝(훑어 보기)를 도울 수 있는 방법
이 때 우리는 게슈탈트 심리이론이나 기억에 관한 인지 심리학 이론의 단기 기억 (의미덩이 만들기: chunking)을 이용한다.

1. 링크의 그룹핑 : 사용자들은 비슷한 아이템들을 서로 관련된 것으로 인식한다. 링크 그룹이 많은 웹 페이지가 능률적이다.(컨텐츠 링크 그룹이 잘 되어 있는 사이트는 CNN.com이다.)
2. 구조화된 목록 : 사용자에 따라 공통의 분류나 친숙한 영역들을 구조화 한다. (달력이 좋은 예이다.)
3. 링크의 차별화 : 다른 컨텐츠로 이끄는 링크는 그 차이점을 명확하게 차별화하는 것이 필요하다.(좋은 예 HP사이트)
4. 여분 링크를 이용한다. : 여분 링크란 사용자에게 복수의 향기를 제공하는 것, 즉 다른 문맥과 다른 목표로 다른 아이디어를 가지고 있는 다른 사용자들을 지원한다.
5. 괄호와 뷸렛을 이용한다. : 사용자들이 링크 그룹들을 다발 짖는 것을 도와 준다. 특히 복수 라인에 걸쳐 링크들이 묶여 있을 때 뷸렛은 사용자가 링크들을 서로 구분하는데 도움이 된다. 


배너처럼 보여서 간과되는 중요한 정보들
사용자들은 화면을 훑고 지나간 다음 중요한 내용이나 시선을 끄는 이미지에 관심을 보이지만 배너 같은 정보는 무시한다.
사용성 테스트 결과, 사용자들은 배너처럼 생긴 그래픽이 중요한 정보이더라도 무시해 버린다는 것을 발견할 수 있었다.
그러므로 사이트의 중요한 정보나 네비게이션을 광고처럼 이미지로 만들거나 배너 영역에 두어서 배너와 혼돈을 일으켜, 사용자들이 이를 간과해 버리도록 만들어서는 안된다.

여러 개의 이미지들이 오른쪽 밑 부분의 배너 광고 영역에 있으며, 그 형태 또한 배너 광고 형식을 띠고 있어 사용자들은 배너로 생각하고 무시하지만 사실은 내부의 주요한 정보들로 연결되는 중요한 링크이다. 그 중 ‘봄나들이’를 클릭하면 ‘봄 나들이 특집 주요 기사 모음’으로 화면이 전환된다.


링크 가능한 영역의 크기와 거리
웹페이지에서 버튼이 너무 작아서 클릭하기 원하는 것을 제대로 클릭하지 못하거나, text 주위의 background를 클릭했으나 클릭되지 않는 경우가 종종있다.
이러한 현상을 Fitts' Law (피츠의 법칙)로 설명할 수 있다. 피츠의 법칙은 속도와 정확성간 접합점의 기본적인 원리이다.

스크린 상에서 버튼의 크기와 커서를 이동시키려는 거리가 주어지면, 버튼까지 커서를 움직이려는데 걸리는 평균시간을 피츠의 법칙을 이용하여 구할 수 있다.

Time(in msec)=a+blog2(D/S+1) 
S : 버튼의 크기 
D : 버튼까지의 거리

위와 같이 커서가 버튼까지 움직이는 시간은 거리에 비례하고 버튼의 크기에 반비례한다.

Button을 클릭하기 위하여, Mouse를 이동시키는 거리가 멀면 멀수록 실수 없이 정확히 Button에 Mouse를 접근시키는 것이 더 어려워진다. 그리고 버튼의 크기(또는 클릭할 수 있는 영역)가 작을 수록 커서를 가져갈 target에 접근시켰을 때 성공할 확률이 낮아진다.

메뉴나 버튼은 쉽게 클릭하기에 ‘충분한 크기와 거리’를 고려해서 디자인 되어야 한다.


사용자들은 긴 화면을 스크롤한다
사용자들이 스크롤하기 싫어한다는 전통적인 견해는 흔히 옳은 것으로 간주되어 왔다.
이러한 가정 하에 한정된 분량을 한 화면에 담으려고 할 때, 디자이너는 대부분 다음의 두 가지 경우 중 한 가지를 택할 것이다.

한정된 화면 공간에 맞추기 위해 정보를 임의로 줄인다.
이 경우, 사용자는 내용 파악에 어려움을 느낀다.

하나의 화면을 몇 개의 페이지로 나눈다.
이 경우, 사용자는 다음 페이지가 로딩될 때까지 기다리는 것보다 다소 길어진 페이지를 스크롤하며 훑어보는 것을 더 선호한다.

사용성 테스트의 결과, 사용자들은 스크롤 자체를 기피하지는 않는다는 것이다. 하지만, 스크롤 바가 있는 긴 페이지에는 반드시 사용자들이 원하는 정보를 찾을 수 있도록 이끌어주는 요소로서의 ‘향기(scent)’가 있어야 한다.

출처 : UIdesign

    

설정

트랙백

댓글

UI디자인 가이드라인 - 신뢰도 높이기

User Interface/Web 2007. 2. 21. 11:10

단기간에 효과적으로 사용성을 높이는 방법
사용성테스트를 할 여건이 안 될 경우 좀더 적은 노력으로 혁신적인 사용성 개선을 원한다면 다음과 같은 방법을 사용해 보라.

우선 로그데이타나 기타조사를 통해 가장 빈번하게 사용하는 기능 또는 작업의 목록을 작성하라. 이 목록 중 최상위의 한두개를 골라 최대한 클릭 수를 줄이고 단순화하기 위해 다음과 같은 방법을 이용해 본다.

하나의 태스크를 대상으로 사용자가 그 태스크를 수행하는데 걸리는 예상 시간을 계산하는 것이다. 손을 마우스에 가져가고, 마우스를 움직이고, 누르고, 메뉴바의 이름을 기억해 내고, 각각에 드는 시간을 기준으로 태스크를 수행하는데 걸리는 총시간을 계산한다. 이때에는 육체적인 액션과 정신적인 액션에 드는 시간을 모두 계산한다. 이러한 방법 GOMS는 매우 세분화되고 한 태스크당 작업 시간도 꽤 걸리지만 놀라운 정도로 정확한 결과를 보여준다.

또 다른 방법은 태스크를 수행하는 각각의 방법을 경로화하여 가장 이상적인 경로를 찾는 Cognitive Walkthrough이다. 사용자별로 태스크를 수행하는 경로를 관찰함으로써 시스템이나 서비스가 사용자의 기대에 부합하는가, 이해가 쉬운가를 볼 수 있다.

이러한 방법들은 사용성테스트보다 간단하게 수행할 수 있으면서 사용자가 기대하는 효과를 성취할 수 있는가를 평가해 볼 수 있는 아주 효과적인 방법이다.
 
사용자에게 자신감을 주는 법
사용자가 자신이 원하는 정보로 접근하고 있다는 자신감을 주는 것이 좋은 디자인이다.
클릭 전에는 그들이 올바른 트랙에 있다는 것을 알려 주어야 하며 클릭 후에는 그들이 정말로 자신이 원하는 정보에 접근해 있다는 자신감을 느끼도록 해야 한다.
사용자들은 보통 자기들이 올바른 트랙에 있는지 아닌지를 안다.
사용자는 먼저 페이지를 대충 훑어 본다(Scanning)는 것을 명심하자.
그 때 그들이 찾는 정보의 키워드나 문장이 링크로 발견 된다면 클릭 전 사용자에게 자신감을 줄 수 있다.
그를 위한 디자인 요소로는 링크의 품질, 내비게이션 그래픽, 정보 구조의 디자인이 있다.

클릭 후에는 키워드나 문장 등에서 요구된 정보를 보여 주는 것, 혹은 더욱 강력하고 구체적인 정보를 발견 할 수 있도록 설계되어야 하며 그 때부터는 사용자가 정보를 꼼꼼히 읽기 시작할 것이다.

- 사용자가 자신감을 잃어버리도록 하는 것 들은
- 거짓말하는 링크
- 키워드가 없는 것(링크에 있던 단어가 컨텐츠에 없으면 속은 기분이 들것이다.)
- 보다 일반적인 컨텐츠
- 예쁘기만 하거나 희미한 링크

등 이며 자신감의 상실은 사용자의 포기를 야기한다.
조사에 따르면 백 버튼을 한번 누르면 42%, 두번 누르면 18%, 세번은 2%의 집계로 나타나는데 결론적으로 사용자가 백 버튼을 2번 누르면 정보 찾기를 완전히 그만둔다는 것을 알 수 있다.

확실한 UI를 짧은 시간에 만들기
확실한 UI를 만들고자 한다면 단연 '사용성 테스트(Usability Test)'를 하는 것이다.
이것은 개발 과정에서 짧은 시간만을 들여서 사용자로부터 훌륭한 피드백을 얻을 수 있는 기회를 마련하는 것이다.
디자인 결정에 있어서 망설여지는 부분이 있다면 테스트해라. 거창하게 할 필요도 없다. 그저 실제 사용자를 데리고 실제 사이트를 테스트하기만 하면 되는 것이다.


잘못된 UI를 아는 방법
사용성 테스트(Usability Test)를 했을 때-간략하게 하건, 본격적으로 하건- UI가 잘못되었다는 것을 어떻게 알 수 있을까. UI가 가장 잘못된 경우는 바로 사용자가 길을 잃고 헤매는 것이다. 사용자가 길을 잃었다는 신호는 다음과 같다.

- 사용자가 길을 잃었다는 신호
- Back button을 사용한다.
- 검색엔진을 사용하여 키워드 검색을 한다.
- 홈으로 돌아오는 버튼을 누른다.
- 사이트 맵으로 찾아간다.


훌륭한 웹 디자인을 위한 10가지 Tips
1. 한 페이지에는 하나의 주제에 대한 내용만 있어야 한다.
2. 액션 버튼들과 링크들은 눈에 잘 띄도록 만들어야 한다.
3. 결정적으로 중요한 페이지는 깔끔하고 심플한 구성을 항상 유지해야 한다.
4. 사용자가 쉽게 읽을 수 있도록 영어의 산세리프체 같은 심플하고 명료한 글씨체, 그룹 박스와 여유 공간을 사용하라.
5. 다운로드 시간을 줄이기 위해 그래픽을 최소화한다.
6. 로고를 클릭하면 home으로 갈 수 있도록 만든다.
7. 페이지의 타이틀은 명시된 버튼이나 링크와 같아야 한다.
8. 모든 입력 페이지에는 취소버튼을 제공하고 모든 메시지 페이지에는 뒤로 가기 버튼이 있어야 한다.
9. 기술적 용어(자바, 자바 스크립트, 애플렛 등) 을 피해야 한다.
10. 개발 전에 Prototype에 의한 Mock-up 테스트와 사용성(Usability) 테스트 등으로 사용자와 충분히 교류해야 한다.


사용성(Usability)을 높이기 위한 Tips
 -가시성과 독이성(읽기 쉬움) 
중요한 링크와 액션은 가시적이고 명백하게 만들어야 한다. 사용자들의 “훑어 읽기”를 감안하여 하이라이트 글자를 사용, 뷰렛화 된 리스트, 짧은 문장 등으로 디자인한다. 
 
 -간결성
빈번하거나 결정적인 업무들은 짧고 간단하게 유지한다. 용어는 사용자의 언어를 기초로 하는 것이 좋다. 기억하라. 짧게 적을수록 효과는 크다. 
 
 -실행
아직 인터넷 접근환경을 33.6kb 이하로 선호하는 반 이상의 사용자들을 위해 다운로드가 빠르도록 디자인한다.
 
 -네비게이션과 조직성
모든 페이지마다 [계속하기], [취소하기] 또는 [뒤로 가기] 그리고 [home]으로 갈 수 있는 명확한 방법을 공급한다. 사용자가 위치를 계속적으로 정보 받을 수 있는 효과적인 페이지 타이틀을 제공해야 한다. 페이지간을 조직적으로 배열하여 정보가 서로 그룹화 되고 접근하기 용이하도록 연계되어야 한다. 
 
 -일관성
비슷한 과업은 같은 맥락으로 수행되는 것이 좋다.  
 
 -피드백(feedback)
문제가 생겼을 때, 메시지는 사용자에게 정확히 무엇이 오류인지, 그리고 어떻게 고쳐야 하는지를 사용자가 이해할 수 있는 언어로 전달해야 한다.
 
 -관용
사용자가 실수한 것에 대한 최소한의 비용을 허용하는 시스템을 제공하고 또한 사용자들의 실행취소(undo)를 허락해야 한다.


사용자를 잡아두는 방법
웹에서의 사용자 시각 추적 연구 결과 사용자가 스크린을 보는 장소에 대해 일정한 패턴을 보여준다고 한다. 제일 먼저 가운데 그리고 왼쪽, 오른쪽의 순으로 나타난 것이다. 그러므로 정보의 중요도나 사이트 전략에 따라 이를 활용하는 것이 바람직 하다. 
 
사용자들은 대부분 배너광고를 무시하는 것을 재빨리 배운다. 여러 사이트의 사용성 테스트 결과, 배너를 마치 하나의 경계선처럼 여기고 배너처럼 생긴 그래픽은 그것이 중요한 정보임에도 발견하지 못하는 것을 발견할 수 있다. 그러므로 사이트의 중요한 정보나 네비게이션은 배너 광고처럼 이미지를 만들어서도 안되며 배너 영역에 두어서도 안 된다. 웹에서의 광고에 대해서는 사이트마다 심각하게 고려해야 할 대상이다.
 
만약 페이지 레이아웃의 그리드가 항상 똑같은 상태면 사용자들은 그 페이지의 부분을 무시하는 것을 배운다. 그러나 레이아웃이 현저하게 바뀌면 전 페이지를 다시 스캔 한다고 한다.(eBay.com은 각 페이지가 다른 레이아웃으로 되어 있음)
 
출처 : UIdesign

    

설정

트랙백

댓글

[UI&C Lab] Create Random MovieClip

Project/UI&C Lab 2007. 2. 21. 11:01
사용자 삽입 이미지

Create Random MovieClip_1

stage의 특정 random 영역에 무비클립을 생성한다. 생성할 때는 중심점이 되는 new Point(x,y)좌표점을 rnadom으로 설정하므로써 그룹단위로 무비클립을 생성하게 된다. 여기서의 문제점은 무비클립이 많아지면 많아질수록 CPU의 과부화 문제가 발생한다. 노트북에서는 무비클립 300개 이상이되면 그때부터 현저하게 속도 저하가 발생한다.

사용자 삽입 이미지

Create Random MovieClip_2

앞의 버전에서 발생한 CPU 문제점을 BitmapData를 통해서 해결한 버전이다. 생성 방법은 앞과 동일하며 그룹단위(무비클립이 30개 단위로 그룹으로 묶는다 if count%30 == 0)

한 그룹이 완료되었을 때 BitmapData를 통해서 화면에 보여지는 무비클립들을 빈 무비클립으로 생성한 무비클립에 draw하고 생성했던 30개의 무비클립을 remove 시킨다. 그리고 다시 30개의 그룹이 완료되면 또다시 밑에 있는 BitmapData로 그린 무비클립과 새로 생성한 무비클립을 다시 BitmapData로 draw시킨다.

이렇게 진행하면 쌓이는 무비클립이 30개 이상을 넘지 않기 때문에 생성하는 무비클립의 갯수가 무한정 늘어난다고 하여도 CPU의 문제는 없다.

진행을 하면서 오류를 범했던 부분은 BitmapData를 draw시키는 무비클립을 draw 시킬때 마다 새로 생성하지 않고 같은 무비클립에 draw시킬 경우에 기존의 draw시킨 무비클립이 메모리에 쌓이는 문제로 인하여 CPU문제가 그대로 존재한다는 것이었다. 이는 30개 그룹단위로 draw시킨때 같은 depth에 새로 무비클립을 생성하여 기존의 무비클립을 삭제하는 형태로 해결하였다.

BitmapData로 draw시킬때 alpha 값을 50%으로 설정하여 draw시키는 시점과 30개의 무비클립이 삭제되는 시점을 화면에 보여주고 있다

사용자 삽입 이미지
Create Random MovieClip_3
 
앞의 구조와 같다. 앞의 경우는 draw시키는 시점을 alpha = 50으로 보여주었으나 여기서는 Bitmap에 blur 필터를 적용한 것이다.
var filter = new BlurFilter (2, 2, 1);
bitmap.applyFilter (bitmap,bitmap.rectangle, new Point (0, 0) , filter);
 

사용자 삽입 이미지
 
Create Random MovieClip_4
 
앞에서 연구한 결과를 가지고 비주얼적으로 표현할 수 있는 방법으로 이와 같은 형태로 작업을 진행하였다.
 
이것은 앞의 것들과 무비클립의 생성과정은 동일하다. 여기서 해당 무비클립이 그룹단위로 생성할때 자신의 고유색을 가지고 생성을 하는데 그 색은 Shift버튼을 누르면 나타나는 background 이미지의 pixel단위 RGB를 축출하여 적용하였다.이미지의 사이즈가 작기 때문에 앞의 것들보다 무비클립을 작게 하였다.
 
사용자 삽입 이미지
 
Shift 버튼을 눌렀을때 배경을 볼 수 있다.
 
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

Create Random MovieClip의 가장 중요한 부분은 화면에 나타난 무비클립이 변형되지 않는다는 전제조건이 있을 경우에는 해당 무비클립을 stage에 남겨두는 것이 아니라 remove 시키되 기존의 이미지가 그대로 남도록 BitmapData를 사용하여 특정 무비클립에 draw시키므로써 수많은 무비클립의 생성으로 발생하는 플래시의 전체적인 cpu 문제점을 해소하는 것에 중점을 두었다.
    

설정

트랙백

댓글

[UI&C Lab] BitmpData Characters...

Project/UI&C Lab 2007. 2. 21. 10:59
이번은 BitmapData를 이용하여 배경 이미지의 색을 축출하여 문자가 포함된 무비클립의 색을 변경하는 작업을 해봤다. 이미지의 윤곽을 잘 보이도록 하기 위해서 무비클립의 갯수를 늘려 6000개가 넘어가니 무비클립을 생성할 때와 색을 입힐때 다소 처리 시간이 지연되는 경향이 있다...
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지


    

설정

트랙백

댓글

UI&C(User Interface & Communication) Lab...

Project/UI&C Lab 2007. 2. 21. 10:57
'UI&C Lab'은 개인적인 공부와 프로젝트를 통해서 얻은 경험을 바탕으로 제대로 된 UI를 개발하는 목표로 만들게 되었다. 이를 통해서 작게는 나의 역량을 키우고 쌓아갈 수 있는 발판이 될 것이며 크게는 사내 프로세스를 변화시키고 진정 내가 하고싶은 것을 하며 밤을 새는 일일 것이다.

'UI&C Lab'은 오프라인에서 진행중이다.

사용자 삽입 이미지


    

설정

트랙백

댓글