정보를 효율적으로 정리하는 방법?

User Interface/Etc 2009.01.04 06:03

인터넷이 발전하면서 사람들의 뇌리에는 ‘인터넷’ == ‘정보의 홍수’ 라는 관계가 성립되었다. 그만큼 인터넷으로 얻을 수 있는 정보는 다양하고 그 양 또한 천문학적이다. 이러한 인터넷에 널려 있는 정보를 효율적으로 찾고, 보여주기 위해 검색엔진을 바탕으로 인터넷 사업이 뿌리를 내렸다.


아래로는 검색을 효율적으로 하는 방법을 모색을 하고, 위로는 사용자의 편의를 위한 UI 구성을 고민하고 있는 식물이 인터넷에 자라고 있는 것이다. 둘 모두 사용자를 위한 자선사업 같아 보이지만 그 안을 들여다보면 이러한 순진한 생각은 스스로에게 미안함을 느끼게 할지도 모를 일이다.



예전에 구글에서 Picasa라는 프로그램을 처음 론칭했을 때 사용해보고 내 컴퓨터에 이러한 이미지가 있었나 했던 기억이 난다. 그만큼 정보는 인터넷뿐만이 아니라 개인 컴퓨터에서도 번식을 하고 있는 것이다.

얼마 전에 팀 내에서 서버관리에 대하여 논의를 한 적이 있다. 프로젝트 소스 관리를 어떻게 하는 것이 좋을지에 대한 논의였는데 논의의 주는 폴더 관리였다. 큰 프로젝트를 제외하고 개별적인 작업은 작업자명을 기준으로 하여 그 아래 서비스 폴더를 정하자는 의견과 서비스 폴더에서 개인별 식별 네임을 지정하는 것이었다. 둘 다 서로 장단점이 있을 것이다.

개인별 폴더를 기준으로 할 경우 작업자를 명확하게 확인할 수 있고 대응할 수 있으며 각자가 관리하기 쉽다. 반면 기존의 작업자가 퇴사할 경우 더 이상 폴더명으로서의 기능은 의미가 없어진다. 서비스폴더를 기준으로 할 경우에는 자신의 폴더가 서비스 폴더 아래에 있기 때문에 관리하기가 다소 불편한 반면 전사의 서비스를 대응하는 입장에서 조직 내에서 공유하고 체계적인 관리를 통해서 공동 의식을 심어줄 수 있을 것이다. 

어느 것이 옳다 옳지 않다고 이야기 할 수는 없지만 그 목적이 어디에 있느냐에 따라 바람직한 판단은 있을 수 있다.

사실 이러한 논의를 하게 한 것은 위에서 이야기한 접근성과 목적이라는 관념의 차이에서 발생하는 것이 아니라 결코 따를 수 밖에 없는 환경에서 비롯된 것이라고 생각한다. 왜?, 무엇 때문에 운영체제의 폴더는 사용자와 상의도 없이 트리 구조로 구분하고 기억력이 둔한 나 같은 사람을 어리석게 만드는 것일까?

폴더 구조는 사용자를 위한 환경이 아니라 시스템을 위한 환경이라는 생각이다. 나는 서비스별로 구별된 폴더로 접근하고 싶기도 하며, 때로는 작업자 별로 분류된 폴더로 보고 싶기도 하다는 것이 사용자 입장인 반면, 둘 중에 하나만 선택해서 관리해야 한다는 것이 시스템의 입장인 것이다. 이런 폴더 구조는 사용자가 자칫 중간 폴더명을 기억하지 못하는 상황에서는 그 폴더 아래에 있는 모든 정보는 찾을 수 없는 쓰레기 정보가 되기 쉽다. 그렇다면 사용자 입장의 환경을 만들기 위해서는 어떤 방법으로 관리하는 것이 좋을까?

한 가지 대안은 태그를 통해서 관리하는 것이 있을 것이다. 구글의 Picasa 프로그램은 이미지에 태그를 입력할 수 있도록 하고 태그를 통해서 로컬 이미지를 검색할 수 있도록 하고 있다. 하지만 태그명을 만드는 것도 일이거니와 같은 사람이 사용을 하더라도 시간의 흐름에 따라서 태그명을 통해서 느끼는 이미지는 머리 속에서 변화하기 마련이다. 또한, 개인이 생각할 수 있는 태그명은 한정되어 있고 그 한정된 태그를 통해서 모든 자료를 관리한다면 찾아야 하는 정보보다 필요 없는 정보가 더욱 많아질 것이다. 그렇다면 다른 대안은?

현재 운영체제의 폴더명은 그것이 하나의 정보를 가지고 있는 것이 아니라 관련 정보가 하드의 어느 섹터에 위치해 있는지 알려주는 포인터 역할만 하고 있다. 그렇다면 폴더명 자체로서 정보를 갖고 있으면 안될까? 예를 들면 “회사”라는 폴더명이 있다면 “회사”라는 폴더명을 클릭하면 회사->서비스->작업자 형태로 보여주고, 회사를 더블클릭하면 서비스폴더가 먼저 나타나게 하고, 회사 폴더에서 회사->작업자->서비스로 설정해 놓으면 회사를 더블클릭시 작업자 폴더가 먼저 나타나게 하는 것이다.

어쩌면 이 방법도 기존의 단순한 구조를 통해서 길들여진 사용자로 하여금 더욱 복잡한 고민을 하게 할 수도 있다. 하지만 적어도 정보를 관리하는 사용자에게 선택권이 주어지는 것은 바람직한 것이라 생각한다. 기존에 응용프로그램으로 존재하는 것일지도 모를 일이지만 말이다.

나는 오늘도 C파티션의 용량이 부족하여 필요 없는 파일을 찾아 삭제하느라 한 시간을 소비했다. 시스템은 이런 나의 감정을 아는지 모르는지 좋다고 작업 진행을 허락 한다… 메롱이다~

신고
    

설정

트랙백

댓글

구글에서 개발한 크롬(Google Chrome) 웹브라우저의 컨셉

User Interface/Web 2008.09.10 18:44
최근 Google에서 개발한 웹브라우저 크롬(Google Chrome)의 컨셉에 대해서 개발자와 일본에서 화상 회의 시스템을 이용하여 질의응답 시간을 가졌다고 한다.

구글의 엔지니어링 디렉터 Linus Upson씨는 다음과 같이 3가지의 주목적 컨셉을 통해서 크롬이 개발 되었다고 한다.

1. 새로운 사용자 경험(user experience)에 의한 usability의 향상
2. 개발자에게 새로운 브라우저, web 시스템 개발 환경을 제공
3. 오픈 소스로 브라우저를 제공하는 것으로, web환경 그 자체로서 발전.

이것을 구현하기 위해서 우선 브라우저의 고속화를 검토, HTML렌더링 엔진으로 Safari등에서 채용되고 있는 WebKit, JavaScript엔진으로서 V8을 채용했다고 한다. 또한 구글 내에서 OmniBox라고 불리는 검색과 주소 입력이 통합된 입력 박스나, 매우 높은 기능으로 다채로운 탭 조작이 가능한 탭 브라우저 기능을 통해서 간단한 조작으로 인터넷을 편리하게 이용할 수 있는 점을 소개했다.


사용자 삽입 이미지

이 탭 기능을 지지하는 기술로써 중요한 것이 멀티 프로세스 모델, 각 탭의 처리가 독립적으로 실행되기 위해서 어느 탭이 busy, 혹은 무응답 상태에서도 다른 탭 또는 브라우저에 영향이 생기지 않게 했다고 한다. 이 때문에 1개의 탭 시큐리티 리스크가 다른 프로세스(탭)에 영향을 주지 않는다고 한다.

이 외로 기초 기술로써 구글의 오프라인으로 web 어플리케이션 실행을 실현하는 기술(Google Gears),가 채용되고 있다고 한다. 이것에 대해서도 향후에는 오프라인으로 데이터베이스 보관 유지나, 연구 최종 단계의 표준화 기술로서 Web표준에 제안할 것이라고 한다.

그 이후 질의응답으로는 구글은 다양한 기술을 FireFox나 Safari와 같은 웹브라우저에 프로젝트를 제공하고 있는데 왜 구글이 브라우저까지 만들었는지에 대한 질문에 Linus는 Mozila등의 브라우저는 오랜 세월 개발되어 훌륭한 소프트웨어가 되어 왔지만, 구글은 그들과는 다른 브라우저에 대한 의견이나 희망이 있으므로, 이 모든 것을 Mosilla에 요청할 수 없는 상황이었기에 브라우저를 구현하게 되었다고 한다.

또한 랜더링에 WebKit을 채용한 이유에 대해서는 동작이 빠른 점과 코드가 심플한 점을 내세웠고 Linus씨에 의하면, 다른 엔진에 비해서 코드사이즈가 1/4 정도라고 한다. Android의 개발로 벌써 사용하고 있으므로 구글의 개발진에게 친숙함이 있었다는 것도 큰 이유라고 한다.

Windows판만 제공되고 있는 점에 대해서는 우선 브라우저의 스피드, 안정성, 기존의 Web환경과의 호환성에 중점을 두었으며 앞으로 차근차근 해결해 나가고 싶다는 이야기가 있었다.

그리고 Chrome의 심플함과 다운로드 사이즈를 어필했으며, 현재 다운로드가 가능한 베타판을 예로 들며 약 7Mb의 다운로드 파일로 47언어를 서포트하고 있다고 한다. 웹브라우저가 선택사항이라는 것을 모르는 유저가 많다는 이유를 들어, 이 작은 사이즈와 간단한 실행환경을 통해서 웹브라우저는 OS에 종속되어 있는 것이 아닌, 사용자에 의해서 선택할 수 있다는 것을 인식시켜주고 싶다고 한다.

여기까지 관련 질의응답에 대한 내용이다. 사실 표면적으로 보여지는 구글의 이러한 웹브라우저 개발 시도는 좀더 큰 범주 안에서 이해할 수 있을 듯싶다. 궁극적으로 구글이 추구하고 있는 것은 온라인과 오프라인의 경계가 무너지고 하나의 통합된 시스템 환경에서 전 세계의 모든 정보를 제공함이 아닐까 싶다.

그러한 일환으로 현재로써 가장 가치가 있고 영향력을 발휘할 수 있는 것을 웹브라우저로 판단했을 것이다. 사실 MS는 웹브라우저에 대해서 별다른 투자를 하지 않았으며 사용자는 얼빠진 익스플로러의 즐겁지 않은 기능에 만족하며 그렇게 살아왔다. 사용자에게는 이러한 경쟁을 통해서 좀더 빠르고 사용성이 좋은 웹브라우저를 사용할 수 있는 권리가 주어지겠으나 표준화가 제대로 이루어지지 않는다면 우리와 같은 웹을 통해서 소통하고 입에 풀칠하는 사람들에게는 적지 않은 혼란을 야기시킬 수 있을 듯싶다. 물론 그것이 우리의 업보이기는 하지만 말이다.

신고
    

설정

트랙백

댓글

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

User Interface/Mobile 2008.05.21 19:33

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

 

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

 

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


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


사용자 삽입 이미지1/160sec | F/1.4 | 85.0mm



햅틱폰 배경화면 >>
사용자 삽입 이미지1/100sec | F/1.4 | 85.0mm사용자 삽입 이미지1/200sec | F/1.4 | 85.0mm사용자 삽입 이미지1/250sec | F/1.4 | 85.0mm

사용자 삽입 이미지1/160sec | F/1.4 | 85.0mm사용자 삽입 이미지1/250sec | F/1.4 | 85.0mm사용자 삽입 이미지1/160sec | F/1.4 | 85.0mm

사용자 삽입 이미지1/320sec | F/1.4 | 85.0mm사용자 삽입 이미지1/250sec | F/1.4 | 85.0mm사용자 삽입 이미지1/400sec | F/1.4 | 85.0mm

사용자 삽입 이미지1/640sec | F/1.4 | 85.0mm사용자 삽입 이미지1/250sec | F/1.4 | 85.0mm사용자 삽입 이미지1/250sec | F/1.4 | 85.0mm

사용자 삽입 이미지1/250sec | F/1.4 | 85.0mm사용자 삽입 이미지1/250sec | F/1.4 | 85.0mm사용자 삽입 이미지1/320sec | F/1.4 | 85.0mm

사용자 삽입 이미지1/250sec | F/1.4 | 85.0mm사용자 삽입 이미지1/200sec | F/1.4 | 85.0mm사용자 삽입 이미지

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

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

사용자 삽입 이미지사용자 삽입 이미지사용자 삽입 이미지5sec | F/16.0 | 17.0mm | ISO-100

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

사용자 삽입 이미지1/15sec | F/1.4 | 85.0mm사용자 삽입 이미지1/15sec | F/1.4 | 85.0mm사용자 삽입 이미지

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

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

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

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

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

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

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


신고
    

설정

트랙백

댓글

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

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

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

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

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

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

사용자 삽입 이미지

신고
    

설정

트랙백

댓글

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

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















사용자 삽입 이미지

신고
    

설정

트랙백

댓글

3D 모델링의 진화

User Interface/Etc 2008.02.08 20:24
진보된 기술의 사용성은 날이 갈수록 단순화된다. 기술의 발전은 모듈화된 기술을들 어떻게 조화롭게 사용하는가에 따라서 그 사람의 능력이 될 수 있는 시대라는 생각이다. 기반이 되는 기술을 알고 있으면 도움은 되지만 그 기초 기술을 습득하기 위한 노력에서 발생하는 스트레스는 더욱 진보된 기술에 대한 아이디어를 방해하는 원인이 될 수도 있다는 생각이다.


대학교 시절 모의 면접에서 '앞으로의 능력은 많은 지식을 알고 있는 것 보다는 많은 정보를 가지고 있는 것이 자신의 능력을 극대화 시킬 수 있다'라고 어필을 한적이 있는데 면접 점수는 그리 좋지 않았다...쿠쿠 재미있는 상상과 아이디어~~










신고
    

설정

트랙백

댓글

남 캘리포니아대에서 개발한 360도 입체영상 디스플레이를 개발

User Interface/Etc 2007.09.02 09:53
남 캘리포니아 대학의 연구자들이 360도 입체영상 디스플레이를 개발했다.이 디스플레이는 "holographic diffuser"라고 하는 특수 필름을 붙인 회전거울과 고속 프로젝터 DVI의 특수한 디코더를 통해 구성되어 있다고 한다. 아래 동영상에서 보면 흑백의 와이어 프레임 모형이나 다각형 모델, 실사 입체 모형도 표시할 수 있어서 컬러 표시도 가능하다고 한다.

이 holographic diffuser의 기술은 .세로 방향에는 난반사하지만 횡 방향에는 거의 난반사가 일어나지 않는다고 하는 특성을 이용하였다고 한다. 이를 통해서 입체영상을 표현 할 수 있고 본체에 대해서 앵글이 높거나 낮아도 상을 볼 수 있게 되어 있다.






논문 : http://gl.ict.usc.edu/Research/3DDisplay/3Ddisplay_preprint.pdf

신고
    

설정

트랙백

댓글

손을 움직여 음악 재생

User Interface/Etc 2007.04.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 미디어 연구소)

신고
    

설정

트랙백

댓글

2012년 디지털기기

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


신고
    

설정

트랙백

댓글

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

User Interface/Etc 2007.02.22 21:03

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

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

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

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

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

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

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

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

출처 : dobiho님

신고
    

설정

트랙백

댓글

사용자 인터페이스 디자인의 일반원칙

User Interface/Etc 2007.02.21 11:35

효과적인 유저 인터페이스 디자인을 위해서는 고려되어야 할 주요 원칙이 있으며, 이는 아래와 같은 10가지 원칙으로 요약 될 수 있다.

[UI Design 원칙 ]

- 가시성의 원칙 (Visibility)
- 조작결과 예견의 원칙 (Natural Mapping)
- 일관성의 원칙 (Consistency)
- 제한점 이용의 원칙 (Constraints)
- 단순성의  원칙 (Simplicity)
- 지식분배의 원칙 ( Knowledge in the World & Head)
- 조작오류의 원칙 (Design fo Error)
- 표준화의 원칙 (Standardization)
- 행동 유도성의 원칙 (Affordance)
- 인체 데이터 적용의 원칙 (Anthropometry)

 
가시성의 원칙 (Visibility)
제품의 주요기능은 노출을 시켜서 조작이 쉽게 되도록 해야 한다
- 어떤 기능이 가능한가?
- 어떻게 조작하여야 하나?
- 조작결과 상태가 어떠한가?

조작결과 예견의 원칙 (Natural Mapping)
사용자가 제품을 조작하여 작동시킨 결과를 조작 부위만 보고도 미리 예견할 수 있도록 하여야 한다.
- 공간적 유추, 문화적 표주느 형태적 유추

일관성의 원칙 (Consistency)
제품의 조작방식에 일관성을 제공함으로써 사용자가 쉽게 기억할 수 있고 빠르게 적응할 수 있도록 해야한다.

제한점 이용의 원칙 (Constraints)
제품의 조작상의 제한사항을 이용하여 가능한 선택의 여지를 줄여서 조작방법이 명확하도록 하여야 한다.

단순성의  원칙 (Simplicity)
- 제품의 구조를 단순화 시켜서 조작시 요구되는 노력을 최소화 시킨다.
- 인간의 기억구조에 적합한 구조로 조작의 방법을 통일하고, 정신적 부담을 줄일 것.

지식분배의 원칙 ( Knowledge in the World & Head)
- 제품의 조작에 요구되는 지식은 사용자가 익힐 필요없이 제품자체에 자연스럽고 명료하게 나타나도록 디자인 되어져야 하나,  사용자가 학습하여 지식을 익혀야만 할 경우에는 사용자의 기억 구조에 적합하도록하여 학습하기 쉽고 기억하기 쉽도록 제품과 사용자 모두에게 상호 보완적으로 분배되어야 한다

조작오류의 원칙 (Design fo Error)
일단 발생된 오류는 쉽게 발견될 수 있도록 하고, 발견된 오류의 수정은 최대한 쉽도록 디자인 한다.

표준화의 원칙 (Standardization)
사용자 인터페이스 디자인의 여러 원칙 적용이 어려워 원칙에 배치되는 임의적 디자인이 될 수 밖에 없을 경우, 이를 표준화하여 한번 학습하면 효과적으로 사용할 수 있또록 하여야 한다.

행동 유도성의 원칙 (Affordance)
사용자에게 제품을 어떻게 다루면 될 것인가에 관한 강력한 단서(조작의 가능성)를 제공하도록 한다

인체 데이터 적용의 원칙 (Anthropometry)
사용자의 성별, 연령, 인종 등에 따라 신체의 크기가 다양하므로 다양한 계층의 사용자를 수용할 수 있도록 고려해야한다.

 

사용자 삽입 이미지

사용자-인터페이스에 영향을 미치는 정보원

출처 : 한국HCI연구회

신고
    

설정

트랙백

댓글

제퍼슨 한의 GUI

User Interface/Etc 2007.02.21 11:16

BTW: I want a video wall like this in my office...
This second one is from Microsoft Research. Note that the actual presentation starts 41 minutes in (the rest is a tour of other Microsoft Research projects and usability facilities).
This stuff is really amazing. There are so many possibilities with this.
Update: Here is another one from TED (thanks Jacob)
More video

신고
    

설정

트랙백

댓글

프라다 폰

User Interface/Mobile 2007.02.21 11:16
 
신고
    

설정

트랙백

댓글

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

User Interface/Etc 2007.02.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
    

설정

트랙백

댓글

SKT 유저인터페이스(UI), 'T스타일'로 간다

User Interface/Mobile 2007.02.21 11:13

SK텔레콤이 향후 선보일 표준 UI에 올해 새롭게 런칭한 브랜드인 ‘T’를 적극 반영할 예정이다. SK텔레콤은 28일 T타워 수팩스홀에서 ‘표준 UI 3.0 2차 설명회’를 갖고 “향후 출시될 표준 UI 3.0은 T스타일 인턴페이스가 될 것”이라고 밝혔다.

사용자 삽입 이미지

▲ 표준 UI 3.0에 대해 설명하고 있는 SKT 조영삼 매니저ⓒK모바일

사용자 삽입 이미지

▲ SKT 표준 UI 3.0 설명회 모습 ⓒK모바일

‘T’는 SK텔레콤의 새로운 이동통신 통합브랜드로 올해 8월부터 선보이기 시작했다. 브랜드 런칭 당시 SK텔레콤은 향후 모든 이동통신 서비스와 기존 브랜드을 단계적으로 ‘T’로 통합한다고 밝힌바 있다. SK텔레콤이 현재 준비하고 있는 표준 UI도 ‘T’브랜드의 전략을 따르고 있는 것.

SK텔레콤이 말하고 있는 T스타일 인터페이스를 간단히 정의하면, GUI와 AUI를 통해 단말기에서 제공되는 서비스의 경험을 T브랜드로 느끼게 한다는 것이다. T스타일 인터페이스 기반의 GUI와 AUI는 SK텔레콤의 단말, 서비스 임베디드 메뉴, 임베디드 어플리케이션에 적용되어 사용자가 단말을 On해서 Off하는 순간까지 T브랜드가 추구하는 가치(세련된/전문가적인, 고품질/자부심, 기술혁신/이동통신리더)를 경험하게 된다.

사용자 삽입 이미지

▲ T스타일 UI화면 ⓒK모바일

이를 위해 SK텔레콤 전 단말의 전원On/Off 애니메이션, 송/수신 콜 애니메이션 등도 T스타일 인터페이스로 적용될 예상이다. 또한 이 인터페이스에 기반한 T스타일폰이 내년 상반기 중 출시될 예정으로 현재 단말제조사와 개발에 들어간 상태이다.

T스타일 인터페이스 하에서 기존 UI와 가장 큰 차별점이라고 하면 바로 'OK키'의 사용이다. 향후 SK텔레콤의 전 단말 및 어플리케이션, 서비스는 해당 항목을 선택 및 주요 순방향 기능키로 ‘OK키’를 사용하게 된다. 현재 ‘네이트 키’가 ‘네이트/OK 키’로 사용될 예정이며 ;‘확인 키’와의 혼동을 줄이기 위해 소프트키 레이블 또한 ‘OK'로 바뀌게 된다.

문자입력 시 특수문자를 사용하기 위해 입력모드를 전환하는 방식도 변경된다. 입력모드 전환을 F2키로 통일 기존의 팟업방식이 아닌 토글방식으로 한글, 기호, 숫자, 영소, 영대, 순으로 변경되게 된다. 이외에 숫자키를 길게 누르면 숫자가 입력되는 방식등도 고려되고 있다. UI 바탕화면 색상은 단말기에 따라 달라질 가능성이 있다. 즉 단말기 색상이 블랙이면 UI의 배경 팔렛트 색상역시 블랙 톤을 뛰며, 단말기가 흰색이면 배경역시 흰색으로 제공될 예정이다.

SK텔레콤은 현재 T스타일 인터페이스를 적용한 표준 UI 3.0을 통해 Accessibility, Consistency, User Support, Identity 등의 UI개선 핵심 속성을 도출할 예정이며 내년 중/하반기 경에 단말기에 적용할 계획이다.


출처 : K모바일  조정형 기자  focus@kmobile.co.kr
신고
    

설정

트랙백

댓글

버튼 없는 엘리베이터, "편리하네"

User Interface/Etc 2007.02.21 11:12

사용자 삽입 이미지





















엘리베이터 탑승 시간을 획기적으로 줄인 엘리베이터가 뉴욕 맨해튼의 고층 오피스 건물들을 중심으로 확산되고 있다고 월스트리트저널이 14일 보도했다.

뉴욕 매리어트 마르퀴스 호텔과 뉴스코 본사, 허스트 본사 건물 등에 있는 이 엘리베이터의 특징은 엘리베이터 안에 버튼이 없다는 점이다.

대신 각 층 마다 있는 키패드에 자신이 원하는 층수를 입력한 후 키패드가 지정하는 엘리베이터를 타도록 돼 있다.

이럴 경우 같은 층에 가는 이용자들을 분류할 수 있기 때문에 매 층마다 서는 불편이 줄고 자동적으로 운행시간도 줄게 된다.

도입 초기에는 작동법을 몰라 당황하는 사람들이 적지 않았지만 적응하고 나면 오히려 짧아진 대기, 운영 시간에 흡족해 한다는 것이 제조사인 쉰들러엘리베이터사의 설명이다.

타임스퀘어 있는 매리어트 마르퀴스 호텔은 객실이 2000실에 달해 엘리베이터가 항상 혼잡을 빚었지만 도입 후 고객들이 만족하고 있다.

루퍼트 머독 뉴스코 회장도 이 새로운 엘리베이터에 대해 "처음에는 어떻게 해야 하는 지 몰라 혼란스러웠지만 지금은 아파트에 있는 엘리베이터의 버튼을 누르지 않아 당황할 정도로 익숙해졌고 시스템에 만족한다"고 말했다.


<저작권자 © ‘돈이 보이는 리얼타임 뉴스’ 머니투데이>

신고
    

설정

트랙백

댓글

HCI(Human Computer Interaction)의 미래...

User Interface/Etc 2007.02.21 11:11

미래를 엿볼수 있는 영화

영화 마이너리티 리포트의 주무대인 워싱턴 D.C.의 2054년 모습을 그리기 위해 스티븐 스필버그 감독을 비롯한 제작진은 1999년 4월, Think Tank를 구성했다고 한다. 이 Think Tank 내에서 제작진과 저명한‘미래학자’들이 도시 경관에서부터 미래 무기에 이르는 다양한 주제에 대해 머리를 맞대고 연구하여 철저한 과학적 지식에 근거한 영화 제작을 시도한 것이다.

영화 속의 시간적 배경은 2054년으로 설정되어 있지만, 영화 속 미래 사회의 모습은 현재 개발이 진행 중인 과학기술상의 지식을 토대로 하여 그려지고 있다. 예를 들면 영화의 주요한 기술적 배경이 되고 있는 e-Paper(Electronic Paper), 3D 디스플레이 등 차세대 디스플레이 기술, 생체인식 기술, 지능형 교통시스템(ITS : Intelligent Transport System) 기술 등은 현재에도 활발한 연구활동이 이루어지고 있다.

영화에 등장하는 다음 기술들에 유의하며 영화를 감상하도록 하자.

1. 미래 기술 관점

1) 미래의 컴퓨터

수사관인 존 앤더튼(톰 크루즈 분)은 유리(Glass) 컴퓨터, 유리 디스켓에 촉각 디스플레이 장갑(Haptic Glove)을 끼고 제스처로 파일들을 처리한다. 이때 장갑에서는 빛이 발광하는데, 아마도 발광다이오드의 촉각 장갑처럼 보인다. 이때의 빛은 바로 네트워킹으로 광자(Photon) 베이스의 빛을 이용한 네트워킹으로 발전할 가능성이 높다. 미래의 컴퓨터는 이처럼 현존의 LCD/PDP가 더욱 혁신을 거듭하여 (1) Liquid Metal 베이스의 유리 컴퓨터나 (2) 아니면 플라스틱 베이스의 FOELD, LEPD로 진화할 것으로 보인다.

2) e-Paper 기술

영화에서 주인공인 존이 당국의 추적을 피해 지하철 속으로 숨어 드는 장면이 나온다. 지하철 승객들 중 일부가 신문을 보고 있는데, 이 신문이 바로 e-Paper 기술이 상용화된 제품이다. 영화 장면을 유심히 살펴보면 신문의 내용이 실시간으로 전송되는 정보로 업데이트 되며 심지어는 동영상까지 나타난다. 이미 지명수배자가 된 주인공은 결국 신문을 통해 정체가 드러나 다시 도주할 수 밖에 없게 된다.

3) 멀티모달(Multimodal) HI(Human Interface)의 기술

이 영화에 등장하는 홍채인식(Iris Recognition, or Eye Scanning) 기술은 음성인식, 지문인식, 얼굴인식, 서명인식, 유전자인식 등의 기술과 비교해볼 때, 그리고 오감 중 인간의 시각이 의사결정에 87% 영향을 미친다는 사실을 고려해볼 때 과연 영화에서처럼 상용화되어 일반화 될 것인가? 유비쿼터스 환경의 중요한 부분을 차지하는 생체인식 기술의 혁신과 확산에 대해 생각해보자.

4) 생체 인식 시스템

영화 속의 주요 건물이나 거리, 지하철 역 등에는 홍채나 망막 등 인간의 안구로부터 정보를 추출해내는 생체 인식 시스템이 설치되어 개인정보를 분석해낸다. 또한 생체 인식 로봇은 돌아다니면서 시민들의 신원을 파악하기도 한다. 이러한 생체 인식 시스템은 범죄 용의자 색출은 물론 일대일 마케팅 등 상업적으로도 응용될 수 있다. 영화에서 주인공이 백화점을 지나갈 때 백화점 내에 설치되어 있는 생체 인식기가 주인공을 개별적으로 식별한 후 직접 이름을 호명하면서 일대일 광고를 내 보내는 장면이 나타나는데, 이것이 상업적 응용의 한 예가 될 수 있다. 생체 인식 시스템의 비즈니스 모델에의 응용에 대해 생각해 보자.

5). Wrist Watch

John 수사관의 Personal Solution의 핵심제품은 Wrist Watch 이다. 2003년 9월에 등장하는 Microsoft 사의 Wristwatch, 그리고 일본의 NTT DoCoMo와 Seiko가 2003년 5월 7일 출시한 Wristtomo가 대표적인데, Wristtomo는 2003년 7월 1일 현재 없어서 못 파는 제품이 되고 있다. 원래 1,000대 목표였으나 지금까지 3,850대가 팔렸고 따라서 올해 판매대수를 10,000대로 늘려 잡았다. 미래의 PDA가 이러한 마이크로 손목시계로 컨버징 된다면 우리는 이에 대해 어떻게 대비해야 하는가?

6) 유비쿼터스 혁명(Ubiquitous Revolution)

Minority Report에 등장하는 미래 전략 사업은 유비쿼터스 혁명(Ubiquitous Revolution)으로 요약할 수 있다. 미래의 u-교통, u-Telematics, u-도로, u-식물원, u-경찰, u-Wearable Computer 등이 등장하는데, 본과정의 학습과 연구를 통해 유비쿼터스 환경하의 미래 사업에는 어떠한 것들이 있는지, 그 요소 기술과 비즈니스 모델에 대해 생각해보자.

7) 최첨단의 지능형 교통시스템(ITS)

영화 속에서는 자기역학을 응용한 자동차가 마치 스파이더맨처럼 빌딩 벽을 오르내리고, 도로 상에는 자동차들이 매우 근접한 상태에서 빠른 속도로 달린다. 물론 자기역학을 응용한 미래형 자동차는 아직 먼 얘기가 될 수 있다. 그러나 차간 거리를 최소화한 상태에서 고속 주행이 가능하게끔 하는 시스템인 ITS는 상용화가 근접한 기술 중 하나이다. ITS에 관련된 기술과 비즈니스에 어떻게 접근할 것인가?

8) 미래의 무기-충격 음파총

주인공이 추격하는 경찰들에게 제압용 총을 쏘는 장면이 나온다. 이 총은 충격음파를 이용하는 것이다.주인공 존 앤더튼(톰 크루즈 분)은 인지자들이 자신을 미래 살인자로 지목하면서 동료들로부터 쫓기는 신세가 된다. 이 과정에서 미래의 경찰이 사용하는 총은 살상용이 아닌 제압용 충격 음파총이다. 자동차 조립공장에서 앤더튼은 이 총을 뺏어 추적하는 경찰들에게 쏜다. 그러자 이 충격음파에 맞은 경찰들은 두 팔을 벌린 채 뒤로 나가떨어진 후 정신을 못 차린다. 충격 음파총은 고강도 음탄(sonic bullet)을 발사해 비행기 납치범을 무력화할 목적으로 미국 캘리포니아에 위치한 아메리칸 테크놀로지스사에서 2001년부터 개발되고 있다. 이 무기는 비행기 기체와 창문을 파괴하지 않고 비행기 납치범에게 일시적으로 극심한 통증을 유발하며 방향감각을 잃게 한다. 국방이나 군사 관련 솔루션은 큰 시장이므로 어떠한 것이 있는지 생각해보자.

기타 홀로그램, 홀로그래픽, 인공지능 베이스의 로봇, 과학/군사용 생물체 로봇 등 기능적 감성, 감각적 감성, 사회적 감성, 문화적 감성을 창출해내는 미래의 기술들을 Minority Report에서 파악해보자.

그 밖에 잘 드러나지는 않지만 마이너리티 리포트가 그려내는 미래 사회는 차세대 초고속, 광대역 통신 인프라의 구축을 기반으로 하고 있다. 또 무선 네트워킹 기술이 활용되는 장면도 부분적으로 나타나는 등 차세대 정보통신기술의 상용화도 예견해내고 있다.

그 대표적인 인프라 기반이 그리드이다.
2. 브로드밴드 네트워크 인프라 관점

다음의 네트워크 인프라 관점의 질문에 대한 해답을 생각하며 영화를 보도록 하자.

1) 영화 마이너리티 리포트에서는 곳곳에서 그리드의 존재를 볼 수 있다. 이 때문에 주인공은 개별 맞춤형 광고의 홍수 속에서 살고 경찰이 워싱턴 D.C. 근처의 그물처럼 얽힌 자동화 고속도로에서도 주인공의 차를 찾아낸다. 가상의 세일즈 맨이 주인공 톰 크루즈를 스캔해 그가 최근 구매했던 옷과 어울릴만한 아이템을 추천해 주는 장면도 등장한다. 마이너리티 리포트에 등장하는 이러한 그리드와 매트릭스의 AI(인공지능)의 공통점은 무엇인가? 2054년의 마이너리티 리포트의 그리드가 2199년의 매트릭스로 진화할 수 있을 것인가?

2) 사물과 사람에 이식된 스마트 칩과 무선기술이 통합되면 모든 것이 변하게 될 것이다. 체내에 이식되는 바이오칩은 무선기술과 통합되면 모든 것이 변하게 될 것이다. 체내에 이식되는 바이오 칩은 그리드를 통해 심장박동 상태를 실시간으로 의사에게 보낼 수 있게 된다. 자동차 메이커는 고객의 차량에 장착된 스마트칩을 이용해 차와 고객의 운전습관까지도 추적할 수 있을 것이다. 고객의 자동차에 대한 디지털화된 정보가 그리드에도 저장돼 이를 통해 정비소는 엔진고장을 발견하고 경찰은 사용자의 과속여부를 확인할 수 있게 될 것이다.

영화 마이너리티 리포트에 등장하는 이러한 시대가 도래하면 빅 브러더에 대한 우려가 현실화 된다. 이것을 해결할 수 잇는 방법은 무엇인가?

3) 그리드는 시큐리티 관련 기술이 상당히 중요하다. 그러나 현재 개발되고 있는 생체인식 기술들은 영화 속에서 큰 허점을 보이기도 한다. 이 영화에서는 홍채인식 기술이 등장하는데 주인공 (톰 크루즈 분)은 그리드를 피하기 위해 암시장에서 안구 이식수술을 받는다, 또한 영화 가타카(GATTACA)에서는 타인의 혈액을 빌려 DNA칩에 의한 보안 검색을 교묘히 피하기도 한다. 현재 개발되고 있는 생체인식 기술의 장단점을 생각해보고 어떤 기술이 가장 효율적인지 생각해보자

4) 그리드가 도입되면 우리가 작동원리도 알지 못하고 전기를 사용하듯 컴퓨터의 기능은 전력 망처럼 눈에 보이지 않게 우리 삶의 일부로 자리잡을 것이다. 또한 컴퓨터의 기능은 그 어느 때보다 복잡해지고 끊임없이 쏟아지는 데이터는 엔지니어들이 감당할 수 없을 정도로 방대해질 것이다. 그러므로 그리드는 스스로 관리하고, 문제점을 진단하고, 보수하는 능력을 갖춰, 이상이 생길 때 우리에게 알려주고 고치는 방법까지 가르쳐 주어야 할 것이다.

이러한 관점에서 IBM이 추진하는 그리드 컴퓨팅과 ANS베이스의 Autonomic Computing에 대해 생각해보자.

5) 매트릭스가 VR(Virtual Reality)의 세계라면 마이너리티리포트는 R(Augmented Reality)의 세계이다. AR과 VR의 차이점은 무엇이며 우리가 추구하는 미래사업은 AR인가, 그렇지 않으면VR인가? AR라면 어떠한 세상을 그려볼 수 있으며 사업의 기회는 무엇인가?

기타 다음의 근본적인 의문에 대해서도 생각해보자.

3. 근본적인 의문

1) Minority Report 는 결국 시스템 에러이다. 시스템이지만 전적으로 인간의 능력에 의존한 시스템이다. 따라서 이 시스템 에러는 결국 Human Error를 의미하는가?

* 미국계 한국인인 제퍼슨 한의 미래형 GUI를 보면 이런 날이 멀지 않았다는 생각이 든다. 물론 지금의 마우스와 키보드의 입력장치에 비해 노동을 많이 해야하는(양 손과 손가락을 이용) 문제점을 어떻게 해결할 것인가를 생각해야 할 듯 싶다.

* 이런 것을 감안해 보면 미래의 두뇌 스포츠로 발전할 수도 있지 않을까 하는 생각이 든다. 질문에 대한 답을 빠른 손동작과 검색 판단 그리고 art 적인 화면 구성 배합 등으로 정보의 정확성, 빠른 판단, 그리고 체력, 미적 감각을 필요로하는 스포츠로 발전 시키면 어떨까 하는 생각도 해본다...

사용자 삽입 이미지

마이너리티 리포트 (Minority Report)

신고
    

설정

트랙백

댓글

UI디자인 가이드라인 - Elements 만들기

User Interface/Web 2007.02.21 11:11

명확한 단계를 요구하는 입력폼
입력폼은 사용자의 정보를 요구하는 화면이므로 사용자들이 가장 민감하게 반응할 수 있고 특히 결재에 관한 입력폼은 금전적인 위험요소도 고려되어 사용자는 과정이나 결과에 대한 확인을 매우 필요해 한다.
해외의 사례를 보면 성질이 같은 덩어리로 단계를 나누고 그 단계마다 화면이 전환되어 사용자가 지금 어느 위치에서 어떤 작업을 하고 있는지를 각 화면마다 정확하게 인지시키는 것을 선호한다는 결론을 도출한 바 있다.
그러나 우리나라의 경우 여러 테스트와 전문가의 분석 결과 조금 다른 사용자의 행태를 발견할 수 있었는데 단계가 시각적으로 명확하게 구분되어 보이되 화면의 길이가 조금 길더라도 한 화면에 보여지는 입력폼의 디자인을 선호하였다.
물론 너무 긴 화면은 지루할 수도 있고 사용자가 포기하거나 힘들어 하는 원인이지만 외국의 사례처럼 서너 줄의 입력폼마다 성격이 다르다는 이유로 화면전환을 하는 것은 우리나라 실정이나 국민성(?)에는 맞지 않는다는 것이 UI 전문가들의 결론이었다.
이러한 결과는 UI 전문가가 여러 번의 테스트를 객관적으로 진행한 산출물이지만 모든 사이트에 적용되는 정답일 수는 없고 사이트와 입력사항의 성격에 따라 달라질 것이다.

결론적으로 화면의 전환 여부는 사용자의 성향에 따라 달라질 수 있으나 입력폼은 가장 명확성이 요구되는 화면이므로 정확히 단계를 나누고 지금 사용자가 어디에서 무엇을 하고 있는지와 얼마나 걸릴 것인지를 여러가지 방법을 이용하여 꼭 명시해야 한다.


마우스오버 만들기
마우스오버를 하지 않을 수 없는 곳은 아무래도 메인 메뉴에 해당하는 네비게이션 바이다. 그러므로 이 곳에 마우스오버를 사용하여 만들 경우가 많을 것이다. 이때 마우스오버 했을 때 서브메뉴링크가 뜨도록 해주면 좋다.

보통 마우스오버를 하면 숨겨있던 이미지나 텍스트가 나온다. 그러나, 숨겨져 있는 정보를 사용자들이 찾아내지 못했을 경우는 어떻게 하겠는가?

사용자가 사용할 마우스의 위치를 생각해 볼 때 대부분 상하로 생기는 스크롤을 움직이기 위해서 마우스의 포인터는 오른쪽 스크롤 바에 가 있다. 마우스가 마우스오버를 하지 않았을 경우에는 숨겨져 있는 정보를 볼 수가 없지 않을까? 그러므로 마우스오버하기 전에 이미 떠 있어야 하는 정보를 굳이 마우스오버 후에 나타나도록 숨겨진 정보로 만들 필요는 없다.


풀다운 메뉴 만들기
풀다운 메뉴는 오래된 사이트에서 단골손님을 위한 메뉴 '바로가기'로써의 역할로 만든다.

풀다운 메뉴의 장점이라고 하면 일반적인 사용자 인터페이스(User Interface)사용하는 요소들 - Back, Forward, Up, Down의 구조 - 를 뛰어넘는 Jump라는 기능을 가지고 있다는 것이다. 하지만, 모든 선택 메뉴들이 숨어 있다는 단점을 가지고 있다.

이 메뉴들이 사용자들의 호기심을 자극하지 않는 한 열어보지 않을 수도 있기 때문에 주의해야 할 UI요소이다. 그러므로, 새로운 사용자들을 위하기 보다는 기존의 사용자들이 빨리 자신이 원하는 메뉴로 점프(Jump)하게 끔 하는 역할로 사용하는 것이 좋다. 또한, 사용자 자신이 자기만의 풀다운 메뉴를 등록 하게끔 하는 것도 괜찮은 방법이다.


검색엔진의 사용성. (1)
사이트 상의 검색 엔진들은 사이트내의 컨텐츠를 찾는 것을 도와주는 목적으로 있다.
그러나 사용성 테스트의 타스크를 통한 성공률을 보면 검색엔진을 사용해서는 30%, 사용하지 않고서는 53% 성공하는 것을 볼 때 검색엔진 자체가 사용성에 충분히 도움을 주지는 못하는 것 같다. 그러나 사용자들은 검색엔진의 사용을 빨리 가기로 인식하는 것 같다.

검색엔진이 일으키는 문제들은 다음과 같다.
- 사용자에게 컨텐츠가 어떻게 쓰여지고 구성되어 있는지에 대해 이해 할 것을 요구한다.
- 검색엔진 스스로가 정보의 향기를 제공하지 않고 있으며 오히려 사용자들 스스로가 향기를 제공해야 한다는 것이다.

검색은 사용자들에게 즉각적인 만족을 주기도 한다. 그러나 사용자가 목적을 달성하는데 얼만큼의 시간을 단축시켜 주는지, 또는 정확하게 목적을 달성하는데 도움을 주는지, 도움을 주기 위해서는 어떤 방법들이 있는지에 대해 디자이너는 고민해야 할 것이다.


검색엔진의 사용성. (2)
Netscape의 DevEdge 검색 엔진으로부터 추출된 1주일치 데이터를 분석해 본 결과에 의하면 일반적으로 1단어 검색이 가장 많은 44%에 달했다고 한다.

또한 복수 단어 검색 중 반 이상이 연속 단어를 사용했으며 나머지 반은 정확한 모양의 쿼리를 사용했다는 것이다. 더욱 중요한 것은 쿼리의 3%가 잘못된 스펠링을 포함하고 있었다는 것이다. 이러한 결과는 사용자는 키워드를 치는 방법에 있어서 자신들의 단어로 원하는 것을 정의하며 이는 1단어 이상이기가 어렵다는 것이며 사용자는 검색 후에 틀린 답에도 뭐가 잘못 되었는지 결코 모른다는 것을 뜻한다. 또한 많은 사용자들이 부울 논리를 사용하지 않는 것으로 나타났다.

검색은 세가지 형태의 문제점을 안고 있다.
- 올바른 검색 영역에 도달하는 것
- 검색을 정의하는 것
- 결과를 해석하는 것

이러한 문제점들은 사용자들이 어떤 키워드를 입력해야 할지 잘 모른다는 것을 의미하며 종종 사용자들을 사이트의 다른 부분으로 갖다 놓는다는 것이다.

그러나 검색은 사용자들에게 즉각적인 만족을 준다. 그러므로 검색엔진의 사용성에 있어 사용자를 고려한 많은 노력(검색의 범위를 좁히는 도구나 프로세스)이 있다면 사용성이 높아지겠지만 그렇지 않다면 오히려 사용성을 감소시키는 주된 요인으로 작용된다는 것을 명심하자.


프레임의 실수
프린트를 어렵게 한다.
프린트를 방해한다. 여러 프레임 중 엉뚱한 부분이 프린트되어져 나올 수 있다.

북마크를 어렵게 한다.
프레임 페이지를 북마크 했을 경우, 다시 찾아갔을 때 엉뚱한 곳으로 왔다는 것을 발견할 수 있다.

검색엔진에 잘못 등록될 수 있다.
검색엔진에서 결과로 나온 URL을 찾아갔을 때 프레임의 일부분만 링크되어 있는 것을 본적이 있을 것이다.

수평 스크롤이 생길 수 있다.
스크롤에는 수직 스크롤과 수평 스크롤이 있는데 수직 스크롤은 요즘 많이들 사용하고 있는 휠마우스를 사용하여 어느 정도 사용하기 편하지만, 수평스크롤은 오른쪽과 왼쪽으로 왔다갔다하는 움직임을 해야 하기 때문에 몹시 불편을 준다.

출처 : UIdesign

신고
    

설정

트랙백

댓글

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

User Interface/Web 2007.02.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.02.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

신고
    

설정

트랙백

댓글