사용자를 위한 효율적인 UI 란 ?

사용자를 위한 효율적인 UI 란 ?

부서 : IT 사업부 디자인팀발표자 : 현인철

목 차

1. UI (User Interface) 란 ?

2. UI 를 고려한 디자인의 필요성

3. 성공적인 UI 를 위한 방법

4. UI 분석과 평가법

5. 효과적 UI 제작을 위한방법

6. 마치며 ..


UI (User Interface) 의 정의

• 사람과 시스템간의 접점 .• 사용자와 각각의 시스템 사이의 정보채널 .• 사용자에게 컴퓨터를 편리하게 사용할 수 있는 환경을 제공하는 설계 내용 .

그림 3그림 1 그림 2


GUI (Graphic User Interface)

• 사용자가 컴퓨터와 정보를 교환할 때 , 그래픽을 통해 작업할 수 있는 환경 .• 마우스 등을 이용하여 화면에 있는 메뉴를 선택하여 작업 .

TEXT 방식TEXT 방식

DOS

아이콘 / 메뉴-> 마우스 작업수행

아이콘 / 메뉴-> 마우스 작업수행

WINDOWS


GUI 를 이루는 요소• 윈도우 (Windows) • 아이콘• 스크롤바• 단추


• 개발자 중심에서 사용자 중심으로의 변화 • 고성능 PC 의 보급 및 인터넷 확산

• 개발 생산성 향상

• 비용절감에 대한 압력증가


• 개발자 중심에서 사용자 중심으로의 변화1.Text -> Graphic 위주의 사용으로 전환 2. 예전에는 개발자가 시스템 개발에 모든 영역을 차지 -> 수 많은 신기술의 출현으로 UI 에 대한 분석 및 시간적인 요소가 부담으로 작용됨 .3. 개발자적 접근 -> 사용하고 평가하게 될 사용자의 고객 수준의 향상과 차별화 방안이 필수적인 사항으로 대두

• 고성능 PC 의 보급 및 인터넷 확산

1. PC 의 가격대비 성능의 향상으로 컴퓨터의 보급율이 증가하였고 개발 툴의 Graphic Interface 기능 지원이 확대 . 2. 인터넷 사용의 확산이 기업의 그룹웨어를 인트라넷 , 익스트라넷으로의 고객 요구사항이 점차 늘어나고 있는 실정이며 이에 대해 고객은 품질 향상을 요구하고 있다 .


• 개발 생산성 향상

1. 개발 방법론이 분업화 및 전문화 -> 화면 표준화 작업의 필요성을 인식 .2. 현업과 개발팀간의 업무 협의에서의 사용자 인터페이스가 사용자 요구사항과 개발 효율성을 극대화 시킬 수 있음 .3. 개발일정 단축과 System Interface 의 일관성을 유지 .

• 비용절감에 대한 압력증가

1. 시스템 개발에 있어서 전체 개발 비용 중에 유지보수에 관계된 비용은 80% 가 UI 와 관련이 됨 .

제이콥 닐슨 ( 세계적인 웹사용성 전문가 ) 은 만약 더 나은 네비게이션 시스템이 만들어지지 않고 더 엄격한 내부 디자인 표준이 강요되지 않는다면전세계적으로 나쁜 인트라넷 사용성으로 인한 비용이 2001 년까지 약 1000 억불로 늘어날 것이라고예견한다 .


• User 가 원하는 것이 무엇인지 정확하게 정의 . • System 의 목적이 무엇인지 정의 . • User 가 쉽고 편리하게 원하는 정보를 얻도록 설계 . • 실제로 User 가 경험하는 것을 테스트하고 , 여러번 반복되는 테스트 후 적용 .

• User 가 원하는 것이 무엇인지 정확하게 정의 .


1. 대다수의 인터페이스가 사용자를 도와주기 보다는 지배하는 역할을 하고 있음 .

2. 시스템의 편의를 위해서 사용자를 분류하고 그러한 분류에 맞추어 행동하도록 강요 . (ex. 카테고리 분류… )

3. 사용자가 현재 위치에서 이루고자 하는 업무가 무엇인가에 대한 철저한 분석 .

모 대기업에 종사하는 최대리는 오늘 처음으로 오픈한 최고급 호텔에서 저녁식사를 하게 되었다 . 그녀는 최신식 호텔내부의 인테리어 디자인과 전체적인 분위기에 감탄하며 , 음식의 맛 또한 매우 좋아 , 만족스러운 저녁을 보내고 있다 . 최대리는 식사후 잠시 화장실에 들른 후 손을 씻으려는 순간 , 수도꼭지 앞에서 머뭇거리게 된다 .

아주 비싸보이는 재료를 사용해 만들어진 멋진 형태의 이 수도꼭지를 어떻게 여는 건지 , 수온 조절은 어떻게 하는 건지 그것을 맞딱들이는 순간 알수가 없었기 때문이다 .

얼핏보니 옆사람은 능수능란하게 물을 틀고 손을 씻고 자리를 떴다 .

이런 상황을 우리는 조작법을 모르는 ‘나의 잘못’이라고 여기고 당황하기 쉽다 . 그것의 사용성에 대해 비판할 여지조차 없이 말이다 . 이는 , 지금까지 고급호텔을 자주 이용하지 않았던 최대리의 잘못이 아니라 , 그것을 디자인했던 디자이너의 명백한 실수임을 비판해야 옳다 . ‘고급호텔의 수도꼭지가 왜 이모양이야 !’

예시 ) User 를 고려하지 않은 경우 ..

• System 의 목적이 무엇인지 정의 .


1. 홍보를 위한 사이트 인가 . (ex. 제품 홍보 )

2. 무엇을 팔기 위한 사이트 인가 . (ex. 쇼핑몰 )

3. 정보제공 검색 사이트인가 . (ex, 포탈 , 뉴스포탈 )

1. 사용자를 위한 다양한 접근 경로를 제공 . (ex. 네비게이션 , 배너 , Quick 링크 제공 )2. 시선 흐름에 따른 정보의 배치 . ( 화면의 구성요소 배치시 사용자의 시선 및 작업의 흐림이 좌측 상단에서 우측 하단으로 진행되도록 배치 )3. 명확한 정보 구조 .4. 자연스러운 page 간의 이동 유도 .


X

O

• User 가 쉽고 편리하게 원하는 정보를 얻도록 설계 .

예시 ) 싸이월드의 UI 경험 단계


정보에 노출된다 . ( 정보의 존재를 지각한다 )예 ) 친구들에 의해 싸이월드의 존재를 알게된다 . 긍정적인 의견을 듣게 된다 .

정보를 접하고자 하는 의지를 가진다 .예 ) 싸이월드에 가입하고 , 회원이 되고자 한다 .

정보를 접할 방법을 파악한 후 알고자 하는 특정 정보를 찾아낸다 .예 ) 싸이월드의 주소를 알아낸 후 , 가입절차를 밝고 , 로그인 한다 .

원하는 정보를 취한다 .예 ) 사용법을 익힌다 . 친구들의 미니홈피를 방문한다 .

취산 정보와의 상호작용을 하고자 하는 의지를 가진다 .예 ) 일촌을 맺고싶다 . 남의 미니홈피로부터 컨텐츠를 가져오고 싶다 .

상호작용을 위한 업무를 수행하기 위해 해야할 일이 무엇인가를 정의한다 .예 ) 일촌을 어떻게 맺는가 ?를 찾는다 . 컨텐츠를 공유할 방법을 모색한다 .

원하는 업무를 수행한다 .예 ) 일촌맺기를 신청한다 .

수행된 업무가 잘 처리되었는가를 확인한 후 안심한다 .예 ) 관심일촌 리스트에 친구의 이름을 확인한다 . 컨텐츠를 공유할 권한을 얻는다 .

• 실제로 User 가 경험하는 것을 테스트하고 , 여러 번 반복되는 테스트 후 적용 .

STEP 01.

STEP 02.

STEP 03.

STEP 04.

STEP 05.

STEP 06.

STEP 07.

STEP 08.


1. 클라이언트

기존의 사이트에 대해 클라이언트 입장에서 해소하고 싶은 문제점과 제작 의도 등을 정확하게 이해하기 위함 .

2. 사용자

고객의 needs 를 정확히 파악 , 고객만족도의 향상 및 향후 유지보수 업무의 향상을 위함 .

UI 의 분석 및 평가시 클라이언트가 과연 유저의 입장에서 검수할 것 인지를 문제를 고려해야 한다 .클러이언트는 유저가 아니라 유저에게 서비스를 제공하는 회사이고 , 다만 스스로 만들어야 할 사이트를 외부에서 대신 만들게 한 것 뿐이기 때문…

• 분석

• 주의점

• 어떻게 만들 것 인가 ?

1. 기존의 방문 사용자 데이터를 분석 . (메뉴의 클릭 수 , 접근경로 , 사용빈도수 체크 )

2. 사이트를 방문했던 사용자들의 패턴을 짐작 .

3. 해당 웹사이트에 사이트 관련 콜센터나 의문 사항에 관한 메일 및 접수 내용 등을 조사하고 마지막으로 사용자 시나리오를 작성 .


5. 효과적인 UI 제작을 위한 방법

• 친숙하거나 편안한 이용흐름을 반영 .• 사용자가 쉽게 이용법을 알고 사용할수 있도록 함 .• 사용자의 이용환경을 고려 .• 사용자가 친숙하거나 배우기 쉬운 언어와 아이콘을 사용 .• 기존의 것들과 차이가 나도록 함 .


• 친숙하거나 편안한 이용흐름을 반영가로쓰기의 한글 표기에 익숙한 대부분의 사용자들은

- 화면의 좌측 상단에서 우측 하단의 순서로 훑어본다 .- 화면의 보다 크게 처리된 내용이 더 중요한 정보라고 가정한다 .- 화면의 상단에 위치한 것이 하단의 것보다 더 중요한 것이라고 생각한다 .- 보다 심화된 정보를 찾을 때 화면의 하단을 본다 .

X

O


• 사용자가 쉽게 이용법을 알고 사용할 수 있도록 함

1. 페이징 기능 구현시 총 페이지수를 보여주고 원하는 페이지로 바로 이동할 수 있는 풀다운 기능 추가

페이지 이동

이전 10 페이지 ◀ 1 2 3 4 5 6 7 8 9 10 ▶ 다음 10 페이지 5/55 ▼

2. 입력필드 옆 부분에 입력가능 글자수와 입력하고 있는 글자수 표시해 줌

< 입력필드 일반형 >

관리상품명 ( 최대 한글 40 자 )32/40

< 입력필드가 길어지는 경우 >

상품명 앞문구

( 최대 한글 40 자 )

32/40□V


• 사용자의 이용환경을 고려사용자가 이용환경이 온라인 or 오프라인에 따른 접근 화면의 구성이 상이해진다 .

그림 1. 웹사이트 에서의 ok 및 cancel 버튼의 배치

그림 2. 의학용 기구들의 터치스크린 화면의 ok 및 cancel 버튼의 배치


• 사용자가 친숙하거나 배우기 쉬운 언어와 아이콘을 사용 .

1. 사용자의 인지 결과에 따른 레이블링의 적용 . (ex, 사이트 네비게이션의 메뉴명 )

2. 메타포 (metaphor) 의 사용 ( 사용자가 유추해서 충분히 생각해 낼 수 있는 이미지를 사용 ) ex. 윈도우와 아이콘의 경우 실생활의 대상물들을 컴퓨터 화면으로 옮김 , 윈도우 탐색기의 폴더등 .


• 기존의 것들과 차이가 나도록 함

예시 . GS eStore


• 기존의 것들과 차이가 나도록 함

예시 . GS eStore


• 진화된 멀티터치 UI

http://www.youtube.com/watch?v=FjS0Z7TnT3U&mode=related&search=

6. 마치며 ..

1. 사용자가 무엇을 선택할지 , 어떤 작업을 해야 하는지 고민 없이 바로 처리할 수 있도록 해주는 것 .

2. 고객이 사이트를 지속적으로 이용하게 만드는 중요한 방법 중에 하나…

3. 사용자의 창조적 활동을 지원하고 시스템 전체의 성능을 향상시키는 역할 ...

• UI 는…

UX (User Experience)

UI ( 사용자 인터페이스 ) => 시각적 측면 + 컨트롤

UX ( 사용자 환경 ) => UI + 사용자가 받게 되는 느낌

감사합니다 .

Documents

사용자를 위한 효율적인 UI 란 ?