본문 바로가기
728x90
반응형

인터넷 & 모바일/뉴미디어디자인 & UX42

colour contrast analyser 다운 및 사용방법, 텍스트 콘텐츠의 명도 대비 [웹 콘텐츠 접근성] 장애인 웹 접근성 관련 (한국형 웹 콘텐츠 접근성 지침 2.1) 텍스트 콘텐츠의 명도 대비를 확인하기 위해서는 명도차를 분석해주는 프로그램이 필요가장 널리 사용되는 colour contrast analyser 다운로드 및 사용 방법 안내 [colour contrast analyser 프로그램 다운로드] 2016년 9월 최신버전 2.4 다운로드 아래 주소에서 colour contrast analyser 최신 버전을 다운로드 받을 수 있다. https://www.paciellogroup.com/resources/contrastanalyser/ [olour contrast analyser 프로그램 설치방법] 다운받은 exe 파일을 실행하면언어 선택이 가능 설치 클릭하면 colour contrast analys.. 2016. 9. 29.
[N스크린/멀티윈도우] 스마트 TV(IPTV)와 태블릿 PC의 연동 : GOAB. A TV Experience Concept 독일의 SYZYGY LAB에서 GOAB. A.TV 관련 N스크린(멀티윈도우) 활용을 위한 컨셉 동영상지금까지 본 동영상 중에서 멀티 윈도우의 개념을 가장 잘 설명한 동영상. http://lab.syzygy.de/ IPTV(스마트 TV)와 테블릿PC(스마트폰)등의 디지털 기기가 잘 융합된 예시... 감성에 따른 콘텐츠를 선택하고 스포츠 중계를 보면서 태블릿 PC를 통해 경기 분석을 동시에...그리고 지인들과 편을 나누어 응원을... TV를 보면서 출연자의 의상에 대한 정보를 태블릿 PC를 통해 얻고, 해당 제품에 대하여 친구들과 온라인 채팅을 통해 정보를 공유하고 구매를 한다는... 등등의... PrologueFor a long time, watching television was a straightfor.. 2013. 6. 19.
멀티윈도우(N스크린)를 적용한 온라인 게임 사례 : 스마트폰과 태블릿PC를 활용한... 스크래블(Scrabble)과 폭풍맞고 멀티윈도우(N스크린)를 적용한 온라인 게임 사례 게임의 상호작용 방식을 그대로 스크린 기기에 제공해줌으로써 물리적 도구 없이 언제나 게임을 즐길 수 있게 제공하고 있다. 스크래블(Scrabble) 미국의 유명한 낱말 맞히기 게임인 ‘스크래블(Scrabble)’은 알파벳이 새겨진 타일을 보드 위(태블릿 PC)가로나 세로로 단어를 만들어 내면 점수를 얻게 되는 방식의 보드 게임. 2명~4명이 진행하며, 플레이어는 랙에 타일을 올려놓고 게임을 진행한다. 이때 아이패드를 보드로 사용하고 개개인이 가지고 있는 아이폰을 랙으로 사용하게 된다. 폭풍맞고 국내에서는 ‘폭풍맞고’ 게임이 미국의 낱말 맞히기 게임과 유사하게 태블릿PC가 보드가 되고 각각의 스마트폰에 보인의 패를 가지고 있다가, 스마트폰을 던지는 행위를 하.. 2013. 6. 18.
영화 마이너리티리포트 (Minority Report, 2002) 전자종이 신문 예시 영화 마이너리티리포트 (Minority Report, 2002) 에서 주인공이 도주하는 장면에서 지하철 승객이 보고 있는 전자신문에서 긴급 수배 속보가 나오는 장면... 2013. 6. 17.
멀티스크린 환경에 관한 설문조사 멀티스크린 환경에 관한 설문조사 안녕하십니까? 본 설문조사는 다양한 스크린 제품을 사용하여 경험하는 멀티스크린 환경에 사용자가 필요한 속성을 찾는데 목적이 있습니다. 설문은 대략 10~15분 정도 소요될 것으로 예상되고 각 문항에 대한 정답은 없습니다. 멀티스크린을 경험하시면서 느끼신 생각을 바탕으로 응답해 주시면 됩니다. 본 조사는 통계법 제33조(비밀보호) ‘통계의 작성을 위하여 수집된 개인이나 법인 또는 단체 등의 비밀에 속하는 사항은 보호되어야 하며 통계의 작성을 위하여 수집된 개인이나 법인 또는 단체 등의 비밀에 속하는 자료는 통계작성 외의 목적으로 사용되어서는 안 된다(개정법률 제8541호)’에 의거하여 설문조사의 내용은 연구자료로만 사용될 것을 약속 드립니다. 2013년 3월 홍익대학교 영상.. 2013. 3. 20.
갈 곳 없는 어이없는 메일 보호되어 있는 글 입니다. 2011. 12. 6.
스마트폰 문자입력 키보드 디자인 - 미래에셋 증권 모바일 디자인을 배워라! 로그인등의 인증과정에서... 아이디는 그렇다 해도, 비밀번호의 경우 일반적으로 문자만의 조합으로 만들지 않는데... 특히 금융권의 경우 '알파벳 + 숫자 + 심지어는 특수기호' 까지 조합을 하게 하고 일부 사람들은 알파벳이 아닌 '한글 자판 기준'으로 비밀번호를 조합해서 사용하고 있는 상황 본인의 경우 아이디가 a4b4 또는 a4b4koh / 비밀번호는 한글자판기준으로 생성하여 사용하고 있음 a4b4koh라는 아이디를 입력하기 위해서는 a -> 숫자변환 -> 4 -> 문자변환 2회 -> b -> 숫자변환... 문자/숫자 변환키를 5번이나 눌러야 하는 불편이 있음 덤으로 한글조합으로 비밀번호를 만들다 보니, 영문으로 변환된 비밀번호를 외워야 하는 불편한 상황이... 오른쪽은 다음의 로그인 화면 정말 쩐다... 2011. 5. 18.
★ 해당 카테고리는... 해당 내용은 웹 및 모바일 기획 및 디자인에 처음 입문하는 학생 및 초보 기획자를 대상으로 작성된 내용입니다. 이에 일부 용어는 한글화 또는 쉽게 풀어 사용되었습니다. 또한 일부 서비스의 경우 기획 의도와는 다르게 설명을 위한 목적으로 분석된 내용들도 있습니다. 이점 고려하여 내용을 이해해 주시기 바랍니다. 2011. 1. 6.
(1/2) 뉴 미디어 디자인의 기본요소 - 스마트폰/태블릿 PC를 중심으로... 1. 뉴미디어디자인의 개념 1) 뉴미디어 정의 전통적인 개념의 디자인 은 크게 인쇄매체(신문, 잡지, 책 등)와 전자매체(TV, 라디오 등) 디자인으로 정의되었다. 불과 몇 년 전 까지는 위에서 언급한 매체를 제외한 다른 device상에서 구현되는 서비스를 뉴미디어 (인터넷 등)로 정의하였으나, 최근 스마트폰, 태블릿 등의 새로운 device가 등장하면서 뉴 미디어에 대한 정의가 다시 이루어지고 있다. 이번 단원에서 정의하는 뉴 미디어는 최근 2~3년 사이에 새로 출시되었거나 각광받고 있는 device를 기반으로 기존매체와의 디자인적인 특징과 차이점을 정의 하고자 한다. 또한 학습할 부분도, 스마트폰, 태블릿PC 등을 중심으로 언급하고자 한다. 2) 뉴미디어 디자인의 특징 (1) 쌍방향성/상호작용성 뉴미.. 2011. 1. 6.
(2/2) 뉴 미디어 디자인의 기본요소 - 스마트폰/태블릿 PC를 중심으로... (4) 개인화 불특정 다수를 대상으로 배포되는 기존의 미디어와 다르게 뉴미디어의 경우에는 이용자 개개인에 맞추어 페이지가 구성되거나 서비스가 제공된다. 뉴미디어 디자인의 경우 이와 같은 특장점을 고려하여 디자인에 반영하여야 한다. 아래 네이버어세 제공하는 ‘네이버 me’서비스의 경우 개인화된 서비스를 중심으로 페이지를 구성하여 제공한다.이를 통하여 초기페이지에서 개인화된 서비스에 대한 접근성을 높이고 이용자의 만족도를 극대화 할 수 있다. 아래 이미지는 IP-TV에서 개인화 기능에 대한 예시이다.이용자가 방송을 시청하면서 자주보는 채널이나 콘텐츠를 등록할 수 있으며, 초기 화면에서 해당 목록에 바로 접속이 가능하게 구성되어 있다. 이러한 특징은 기존의 올드 미디어에서는 구현할 수 없는 기능이며, 많이 사.. 2011. 1. 6.
(1/3) 뉴미디어 UI의 개념 - Bar : The Status Bar, Navigation Bar, Tool Bar, Tap Bar 1. 개요 최근 스마트폰과 태블릿 PC의 보급이 급속화 되면서, 해당 디바이스에 대한 UI의 중요성이 대두되고 있다. 해당 디바이스의 경우 기존 PC에서 사용하는 방식과 큰 차이를 느끼지 못하지만, 해당 기기에 최적화된 차별화된 UI 요소들이 지원되고 있다. 여기에서는 스마트폰과과 태블릿PC에서 구현되는 주요한 UI구성에 대하여 학습하고, 해당 요소들이 어떠한 개념을 가지고 서비스에 적용되는지를 학습하도록 한다. 2. Bar 1) The Status Bar 상태바는 해당기기의의 중요한 정보 및 상태를 보여주는 바이다. 아래와 같이 전화 및 무선접속 상태, 베터리 잔량, 현재 시간 등 해당 기기를 사용하면서 이용자가 꼭 알아야 하는 중요한 정보를 제공하는 부분이다. 아래 이미지는 아이패드와 아이폰, 옵티머.. 2011. 1. 6.
(2/3) 뉴미디어 UI의 개념 - Content Views 1 : Popover, Split View, Table View 1) Popover 팝오버는 사용자가 어플리케이션을 이용하는 과정에서 네비게이션 바의 컨트롤 버튼을 클릭하거나 화면에서 지정된 링크를 클릭 하였을 때 기존 화면위에 오버되어 출력되는 기능이다. 해당 기능은 아이패드 등 태블릿 PC에서만 지원되며, 기존 스마트 폰 사용시 반복적으로 화면을 오고가는 불편을 해결해 주는 기능이다. 오른쪽 이미지는 일정을 입력하는 과정에서 반복기능을 호출하는 화면이다. 배경에 일정이 출력되어 있는 상태에서, 어떠한 주기로 일정을 반복할까에 대한 옵션을 팝오버로 출력해 주고 있다. 이러한 기능을 통하여 메인화면이 유지된 상태에서 각각의 옵션을 쉽게 호출하고 닫을 수 있는 UI를 제공한다. 또한 팝오버 화면에서는 아래와 같이 테이블, 이미지, 지도, 텍스트, 웹 등의 다양한 구성물.. 2011. 1. 6.
(3/3) 뉴미디어 UI의 개념 - Content Views 2 & Controls : Alert, Action Sheet, Modal View 4) Alert 경고창은 어플리케이션이나 기타 서비스를 이용하는 과정에서 사용자 주의를 요하는 경우 또는 추가 옵션이나 기능을 제공하고 이용자가 이를 인지하거나 선택 할 수 있도록 하는 기능이다. 기능적으로 해당 창은 화면의 중앙에 위치하도록 배열하며, 이용자가 이를 확인(해지)하기 전에는 현재 실행중인 응용 프로그램을 사용할 수 없게 구성한다. 또한 경고창의 내용은 가능하면 짧고 간결하게 제공되어야 한다. 오른쪽 하단의 이미지와 같이 긴 문장의 경고문은 피해야 한다. 통상 한줄에서 두줄로 간결하게 내용이 제공되어야 한다. 5) Action Sheet 액션 시트는 사용자가 실행한 작업과 관련하여 기능을 선택할 수 있도록 구성한 세트를 정의한다. 엑션 시트의 경우 아이폰과 아이패드에서 구현되는 방식과 디자.. 2011. 1. 6.
(1/1) New Media User Interface의 디자인 사례 - 모바일 웹 1. 개요 최근 각광받고 있는 스마트폰의 경우에는 통상적으로 두가지 방법으로 서비스 이용이 가능하다. 하나는 기존 PC기반의 인터넷 이용과 유사한 ‘브라우져’를 통한 접속과 다른 하나는 ‘어플리케이션’을 다운로드 받아 스마트폰에 설치 한 후 접속시 이를 구동하여 이용하는 ‘어플리케이션’ 방식의 서비스로 나누어 진다. 이 장에서는 브라우져를 통하여 인터넷을 이용하는 ‘모바일 웹’방식에 대하여 디바이스별로 공부하도록 한다. 특히 기존 PC기반의 브라우져 서비스와 저해상도의 스마트폰 브라우져서비스 그리고 고해상도의 태블릿PC의 브라우져서비스 비교를 통하여,이종 단말간 UI의 차이점을 이해하고. 동일한 서비스가 다양한 해상도의 디바이스에서 구현될 때 UI의 통합이 우선인지, 각 단말별 최적화가 우선되어야 하는지.. 2011. 1. 6.
(1/3) New Media User Interface의 디자인 사례 - 스마트폰 (아이폰을 중심으로) 1 개요 스마트폰의 경우 웹서비스와는 다르게 좁은 화면과 제약된 기능을 고려하여 서비스를 설계하여야 한다. 특히 키보드나 별도의 스타일러스펜을 이용하지 않고 손가락으로 조작하는 정전식 터치폰이 보편화 되면서, 좁은 화면을 효율적으로 사용하는 설계와 인터렉티비티(Interactivity)를 어떻게 향상시키는가가 UI가 좋은 서비스를 판단하는 기준이 되고 있다. 스마트폰의 주요한 기능인 다양한 터치기능과 G센서를 이용한 자동 화면전환 UI설계에서도 이러한 모바일 기기만의 다양한 기능을 잘 적용하여야 한다. 1. 스마트폰의 주요한 기능을 활용하라 1) 가로-세로 화면이동을 잘 활용하라 G센서(중력/gravity 센서)는 중력 작용에 의해 물체의 움직임이나 기울어짐을 인식하는 센서를 말한다. 즉 휴대폰을 가로 세로.. 2011. 1. 6.
(2/3) New Media User Interface의 디자인 사례 - 스마트폰 (아이폰을 중심으로) 2 3. 여러 서비스간 통일성을 유지하라 (1) 동일한 기능에는 동일한 색상과 아이콘을 배치한다 모바일 기기에서는 유선과 다르게 많은 설명이나 에러메시지, 심지어는 ‘alt tag’를 적용하기도 곤란하다. 이에 여러 어플리케이션간 공통된 아이콘과 색상으로 한번 학습이 이루어진 이후에는 다른 어플리케이션에서 유사한 기능을 사용할 경우에도 기존 학습한 내용을 바탕으로 큰 어려움이 없이 이용이 가능하게 된다. 아래 메모와 메일어플리케이션의 경우 공유/이동/보내기 등의 긍정적인 기능은 파란색 버튼으로, 삭제와 같은 중요한(부정적)기능의 경우에는 빨간색 버튼과 v아이콘으로 통일되어 제공된다. 또한 모바일디바이스의 비밀번호 기능에서도 이용자가 잘못된 비밀번호를 입력하였을 경우에도 진동과 색상을 통한 경고메시지를 출력한.. 2011. 1. 6.
(3/3) New Media User Interface의 디자인 사례 - 스마트폰 (안드로이드폰을 중심으로) 아이폰과 차별화 되는 안드로이드 폰의 UI 특징을 살펴보도록 한다. 해당 장에서는 아이폰과 중복되거나 큰 차이가 없는 부분을 제외하고 버튼과 위젯 중심으로 간략하게 소개 한다. 안드로이드 폰에는 다음과 같은 특징이 있다. A. 4버튼 : 아이폰이 버튼은 한개의 버(홈버튼)으로 구성되어 있고 나머지 기능은 화면상에서 제어되는 반면 안드로이드폰은 전면에 통상 4개 그리고 측면에 추가적인 버튼(사진찍기 등)이 배열되어 있다. 이를 통하여 기존 PC 입력장치에서 이루어지는 일부 기능을 사용할 수 있다. B. 위젯 : 아이폰은 배경에 바로가기 아이콘과 폴더로만 구성되어 있는 반면, 안드로이드 폰의 경우에는 추가적으로 위젯을 설정 할 수 있다. C. 페이지의 구성 : 안드로이드 폰의 경우 5 또는 7페이지만을 구성.. 2011. 1. 6.
(1/2) New Media User Interface의 디자인 사례 - 태블릿 PC 1 개요 최근 삼성전자의 갤럭시탭과 애플의 아이패드가 국내에 출시되면서 국내에서도 태블릿PC에 대한 관심이 높아지고 있다. 다만 태블릿 PC의 경우 새로운 OS가 적용된 것이 아니라, 기존 스마트폰에 적용된 OS를 기반으로 운용되어 스마트폰 UI와 큰 차이가 발생하지는 않는다. 다만 스마트폰 대비 2배 이상의 해상도와 크기를 가지고 있어 어플리케이션상의 GUI에서는 많은 차이를 보이고 있다. 또한 이용자의 사용목적 또한 기존 스마트폰과는 다른 UI를 나타내기도 한다. 특히 E-Book등에서 많은 시도가 이루어지고 있어 이에 대한 스터디와 관심이 요구된다. 이번 장에서는 사례 중심으로 태블릿PC의 UI를 학습하도록 한다. 1) drugs.com Pill Identifier - 팝오버(Popover) 팝오버는 .. 2011. 1. 6.
(2/2) New Media User Interface의 디자인 사례 - 태블릿 PC 2 4) 가로보기, 세로보기 중앙일보의 경우 세로화면에서 가로화면으로 전환시, 별도의 추가적인 UI에는 변화가 없다. 이 경우 이용자의 입장에서는 각각의 화면 UI에 대하여 별도의 추가 학습 없이 이용이 가능하다. 다만 이 경우에는 이미지의 해상도가 큰 사이즈에 맞도록 제작되어야 하며, 때로는 두벌의 이미지를 지원한다. 테블릿 PC의 경우에는 통상적으로 가로보기와 세로보기를 동시에 지원한다. 이 경우 동일한 서비스에서도 단순히 폭(width)을 조절하여 지원하기도 하지만 아래와 같이 가로-세로별 작은 UI의 변화를 준다. . 중앙일보의 경우 세로화면에서 가로화면으로 전환시, 별도의 추가적인 UI에는 변화가 없다. 이 경우 이용자의 입장에서는 각각의 화면 UI에 대하여 별도의 추가 학습 없이 이용이 가능하다... 2011. 1. 6.
(1/3) New Media User Interface의 디자인 사례 - IPTV 1 개요 IP-TV는 최근 각광받기 시작한 서비스로 초고속 인터넷 망을 기반으로 셋탑박스를 이용하여 TV를 통해 동영상은 물론 게임, 검색 등의 부가서비스를 즐길 수 있는 쌍방향 뉴미디어 서비스이다. 특히 기본적으로는 컴퓨터와 유사한 구성을 취하고 있으며 (모니터=TV, PC본체=셋탑박스, 키보드+마우스=리모컨) 입력도구(리모컨)의 제한과 PC나 스마트폰등의 모바일 기기에 비하여 출력장치(TV)와 조작자간의 거리가 가장 먼 서비스이기도 하다. 또한 PC의 키보드에 비해서 리모컨은 입력에 많은 제약이 따르게 되어 이를 극복할 수 있는 UI 디자인이 요구된다. KT의 ‘USER INTERFACE GUIDE’에서 말하는 일관되고 편리한 서비스를 시청자에게 제공하기 위한 세부사항은 아래와 같다. ① 화면은 심플하게.. 2011. 1. 6.
(2/3) New Media User Interface의 디자인 사례 - IPTV 2 2. TV에 맞는 네비게이션 룰(Navigation Rule)을 고려하라 1) 현재 뎁스(depth)와 이전 뎁스를 효율적으로 배치하라 TV를 시청하면서 이용자가 채널 검색을 시도 할 경우, 현재 시청하고 있는 화면을 최대한 보호하면서, 이용자가 원하는 목적(채널 검색 등)을 달성할 수 있도록 명확하고 깔끔한 메뉴를 제공하여야 한다. 또한 목록별로 분류된 VOD/실시간 영상 데이터를 제공하는 서비스의 성격상 트리(tree)와 폴더(Folder)형식의 구성을 취하고 있는데 이 경우 5뎁스 이상의 복잡한 구조를 가지게 된다. 물론 전통적인 웹사이트의 경우 이용자가 메뉴를 클릭하여 하위뎁스로 이동하면 해당 뎁스(메뉴)에 맞는 페이지로 전환되는 방식이 반복되지만, IP-TV의 경우 현재 시청하고 있는 화면이 재.. 2011. 1. 6.
(3/3) New Media User Interface의 디자인 사례 - IPTV 3 3. 사용 환경을 고려하라 1) 시청 정보의 정확한 제공 VOD/생방송 서비스의 경우 이용자 편의를 위하여 아래와 같은 기능을 제공할 수 있다.이러한 요소들이 방송 화면을 최대한 가리지 않고 구현되는 UI를 보자 ① 생방송의 상황바 생방송 시청중에 확인버튼을 선택시 아래와 같이 화면 하단에 현재 방송의 시작 종료 시간과 진행한 시간을 보여 준다. 또한 상하 채널이동 및 등록 기능을 제공한다. ② VOD의 컨트롤바 VOD 시청중 ‘확인버튼’ 또는 ‘VOD 재생버튼’을 선택하면 오른쪽 상단에 다음과 같은 정보가 출력된다. 확인버튼을 선택하면 현재 시청중인 VOD의 총시간과 시청시간이 표시된다. 또한 ‘VOD 재생버튼’을 선택하여 배속 변경 및 일시정지 기능등을 선택할 경우에도 해당 컨트롤바를 통하여 조작 상.. 2011. 1. 6.
(1/6) New Media User Interface의 디자인 사례 - Web : 이용자에게 친절하라 1 들어가며 User Interface가 훌륭한 디자인 사례는 특별한 것은 없다. 즉, 이용자가 유무선 인터넷 서비스를 이용 - 특히 이용자의 행위를 일으키며, 미션을 수행하는(검색, 글쓰기, 구매 등) -하면서 별다른 어려움을 느끼지 못하고, 목적을 완료하는 과정에서 큰 장애를 느끼지 못하였다면, 해당 사이트는 User Interface 차원에서 매우 잘 디자인된 사이트라 할 수 있다. 그러나 인터넷 사이트를 이용하면서 본인들이 겪었던 불편이나 경험을 생각해 보면, 안타깝게도 대부분의 사람들이 한두번도 아닌 상당히 많은 빈도로 불편을 겪었을 것이다. 심지어는 본인이 하고자 하는 바를 완료하지 못하고 중간에 포기하는 일도 경험했었을 것이다. 이러한 경우들은 기획과 UI의 문제에서 발생하기도 하지만, 페이지의.. 2011. 1. 6.
(2/6) New Media User Interface의 디자인 사례 - Web : 이용자에게 친절하라 2 3) 문제를 알고 있을 경우 최우선 적으로 통보하라 아래의 경우를 보자, 쇼핑몰에서 이용자가 제품을 구입하는 과정에서 재고부족 알림을 출력해 주는 과정을 설명하고 있다. 위의 경우에는 이용자가 구매과정을 모두 수행하고 결제 버튼을 클릭 한 이후에 재고 부속을 알려주며 첫페이지로 화면을 이동시킨다.이 경우 이용자의 입장에서는 처음부터 다시 제품을 검색하여 제품을 찾고 처음부터 다시 구매 프로세스를 진행하여야 하는 불편을 주고 있다. 심할 경우에는 이용자가 해당 구매를 포기하는 경우가 발생하기도 한다. 이는 이용자에게 나쁜 기억을 주게 되고 해당 사이트의 신뢰도를 떨어뜨리는 요인이 된다. 그러나 아래의 경우에는 이용자가 제품을 선택하는 첫 과정에서 재고 부족을 알려주고 있다. 이 경우 이용자는 처음부터 문제.. 2011. 1. 6.
(3/6) New Media User Interface의 디자인 사례 - Web : 통일된 메시지와 UI를 제공하라 2. 통일된 메시지와 UI를 통합하라 1) 하나의 사이트에서는 동일한 용어를 사용하라 ‘게시판-보드’, ‘댓글-리플-한마디’, ‘윗글/아랫글-이전글/다음글’ ‘메인-홈’ 등등 동일한 서비스에 대하여 사이트별로 다양한 용어를 사용하곤 한다. 이 경우 하나의 사이트에서 동일한 서비스(기능)를 제공할 경우에는 통일된 용어와 기호를 사용하여 이용자의 혼란을 최소화 하고, 사이트의 통일성을 꾀할 수 있다. 또한 이용자의 입장에서는 해당 사이트에서 한번의 경험만으로도 다른 서비스의 동일한 기능를 이용할 경우에도 추가적인 학습없이 이용이 가능하게 된다. 아래는 다음(http://www.daum.net)의 아고라, 증권, 부동산의 게시판 페이지이다. 각기다른 3개의 서비스에 위치한 게시판임에도 불구하고, 글쓰기, 답글.. 2011. 1. 6.
(4/6) New Media User Interface의 디자인 사례 - Web : 이용자의 눈높이에서 커뮤니케이션 하라 1 3. 이용자의 눈높이에서 커뮤니케이션 하라 1) 이용자와 소통이 가능한 언어를 사용하라 이용자가 미션을 수행하는 과정에서 진행과정 또는 해당 과정에서 발생하는 오류를 이용자에게 알려주게 된다. 이러한 과정에서 이용자의 눈높이에 맞는 용어의 사용이 중요하다.특히 개발자만이 사용하는 기술적인 단어 또는 프로그래밍 언어가 수정없이 출력되는 것은 오히려 이용자에게 혼란만을 가중시킬 뿐이다. 아래의 이미지는 인터넷쇼핑몰에서 결제를 하는 과정에서 출력되는 창이다. 고객에게 친절하게도 결제가 진행되는 과정을 알려주고 있으나, MPI(Merchant Plug In)라는 이용자에게는 생소한 단어를 사용하여 불편을 주고 있다. 우측의 경우에는 항공사의 메인페이지 화면이다. 비행기 표를 판매하는 안내문구에 ‘엠바고기간’이라.. 2011. 1. 6.
(5/6) New Media User Interface의 디자인 사례 - Web : 이용자의 눈높이에서 커뮤니케이션 하라 2 4) 고객의 디바이스(Device) 또는 개인정보를 제어하기 위해서는 고객의 동의를 먼저, 그리고 명확하게 받아라. 최근 고객의 정보(위치정보 등)를 수집하거나, 프로그램 설치시에 다른 프로그램을 묶어서 설치하는 경우가 빈번하다. 이 경우 고객에게 설치의 목적에 대한 설명은 물론, 고객이 선택한 프로그램 이외의 프로그램을 추가로 설치하기 위해서는 고객에게 어떠한 프로그램을 추가로 설치할 것이며, 설치하는 목적에 대하여 고객이 동의하는지를 명확하게 확인하여야 한다. 또한 동의과정은 고객이 반드시 선택하게 하여야 한다. 다음 설치형 동영상 플레이어인 그래텍의 곰플레이어(http://gom.gomtv.com/)를 설치하는 과정의 경우, 프로그램을 설치한 후 자사 제품인 ‘곰 오디오’의 설치를 고객에게 권장하는.. 2011. 1. 6.
(6/6) New Media User Interface의 디자인 사례 - Web : 이용자의 실수에 대한 적절한 가이드를 제공하라 4. 이용자의 실수에 대한 적절한 가이드를 제공하라 서비스를 제공하다 보면, 이용자가 사이트를 이용하는 과정에서 기획당시 전혀 예측하지 못한 이용자 실수가 발생하곤 한다. 이 경우 이용자는 물론 기획자 또한 당황하게 되는데, 훌륭한 UI기획자는 이러한 고객의 실수에 대해서도 고객이 이를 인지하고 다음 단계를 갈 수 있는 기획을 하게 된다. 다음의 예시에서 고객중심의 UI 기획을 살펴 보도록 한다. 1) 고객의 잘못된 페이지 접속시도 웹사이트에 접속하기 위하여, 이용자들은 기존에 저장해둔 북마크를 이용하거나 또는 해당 주소(URL)를 주소창에 입력하거나, 검색사이트에서 접속하고자 하는 사이트를 검색하여 검색결과를 클릭하여 접속하게 된다. 이러한 과정에서 이용자들은 아래와 같은 오류를 발생할 수 있다. ① .. 2011. 1. 6.
[비밀글] (1/8) User Interface 디자인 실습 - UI 콤포넌트 제작하기 : 사이트맵(Sitemap) 개념 및 작성법 보호되어 있는 글 입니다. 2011. 1. 6.
[비밀글] (2/8) User Interface 디자인 실습 - UI 콤포넌트 제작하기 : 웍플로우(Workflows) 개념 및 작성법 보호되어 있는 글 입니다. 2011. 1. 6.
728x90
반응형

티스토리툴바