본문 바로가기

인터페이스디자인

06_인터페이스 디자인의 기초_얼굴없는 인터페이스 디지털세계와 소통하기위해서 화면이 유일하거나 최소한 중심적인 방식이 아닐 수도 있는 시대를 맞이했다. 유비쿼터스 컴퓨팅 시대 사람의 신체가 인터페이스를 컨트롤 한다. 목소리, 동작, 혹은 특정한 곳에 있는것만으로 이들을 컨트롤 하게된다 ex)고객상담 서비스는 대부분 자동응답 서비스, 자동차 헤드라이트를 끄지않으면 울리는 경보음 목소리 음성지시에 따라 진행되는 은행거래 일반적으로 해당 기기가 음성 외의 다른 인식기능이 없거나 음성인식 통화연결 기능이 들어 있는 휴대폰처럼 음성으로 컨트롤 되는 인터페이스를 미리 갖추고 있다. 동작 영화 '마이너리티리포트'의 반투명 스크린앞에서 손으로 특정 동장을 위하는 것만으로 화면 안의 오브젝트를 옮기거나 문서를 확대하거나 비디오를 틀거나 끄는 장면은 동작 기반 컨트롤의 .. 더보기
06_인터페이스 디자인의 기초_표준 인터페이스 표준을 얼마나 잘 지켜야하는가 제이콥 닐슨(Jakob Nielsen) 같은 사람은 표준을 공표하고 이끈다. 수년간 디자이너들의 연구끝에, 사용자들은 특정 아이템이 특정한 장소에 있을 것을 기대하고 특정한 기능이 특정한 방식으로 기능하기를 바란다는 사실을 알아냈다. 이런 표준을 무시한다면 사용자들이 다른 애플리케이션에서는 쉽게 되는 방식을 사용하지 못하고 새로운 방식을 학습해야 한다. 표준을 무시하면 사용자들의 짜증과 화를 블러일으킬 수 있다. 출처 : (에이콘 UX 프로페셔널 시리즈 1-01) 인터랙션 디자인: 더 나은 사용자 경험(UX)을 위한 더보기
06_인터페이스 디자인의 기초_소리 소리는 인터래션 디자인으 ㄹ할때 너무 과하게 사용되거나 너무 부족하게 사용된다. 소리는 어떤 이벤트가 벌어졌다는 알림을 해줌으로써 사용자들이 뚫어져라 모니터 안의 애플리케이션을 노려보지 않아도 되게 해준다. 소리는 사용자들이 다른 업무를 하는 동안에도 변화가 일어나는 애플리케이션에 특히 효과적으로 사용된다. ex)메일도착시 '딩동', 메신져 접속시 '찰칵', 휴대폰의 메시지 알림 어떤 소리가 시간이 지날수록 짜증이 나는것을 알수 있는 방법은 소리를 녹음해서 사람들에게 들려주고 어떤 반응을 보이는지 지켜보고 계속 반복적으로 들어본다. 애플리케이션을 직접 사용해보고 짜증이 나는지 스스로 경험해본다. 출처 : (에이콘 UX 프로페셔널 시리즈 1-01) 인터랙션 디자인: 더 나은 사용자 경험(UX)을 위한 더보기
06_인터페이스 디자인의 기초_아이콘 아이콘이란 기능과 동작을 나타내는 시각적 상징물로써 이들은 바로 가기 기능을 재공하거나 사용자가 필요한 기능을 시각적으로 하는 역할을 한다. 시각적 상징을 선택하는 것은 매우 중요한 일이다. 혼란스러운 이미지는 뭔가를 설명하기는 커녕 전혀 알 수 없게 만들어버릴 수 있다. 애플리케이션에서 많이 쓰이는데 많은 기능을 아이콘 없이 스크린에 표현하는 것은 거의 불가능하기 때문이다. 화면과 크기가 굉장히 제한되어 있는 모바일 기기에서는 배터리 용량과 신호 강도를 표시하는 아이콘은 정말 중요한 역할을 하고 이걸 글자로 표현하자면 공간을 너무 많이 차지한다. 출처 : (에이콘 UX 프로페셔널 시리즈 1-01) 인터랙션 디자인: 더 나은 사용자 경험(UX)을 위한 더보기
06_인터페이스 디자인의 기초_비주얼 인터페이스 디자인의 기본요소_레이아웃 비주얼 인터페이스 요소에는 버튼, 라벨, 화면 상 개별 아이템의 위치, 디바이스 상에서의 스크린 위치, 다른 인터랙션 디자인 요소들이 위치할 공간이 포함된다. 비주얼 인터페이스는 기본 요소 몇 개만으로 이뤄져있다. 이런요소들이 어우러진 방식이 비주얼 인터페이스를 정의한다. 레이아웃 모든 스크린 비주얼 디자인의 핵심은 레이아웃이다. 레이아웃이란 구성요소, 칸트롤, 컨텐츠를 어디에 어떻게 배치할까 고민하는 것이다. 레이아웃은 이런 요소들을 배치할 구조를 만들어 내고 우선순위를 매겨 놓음으로써, 사용자는 무엇이 더 중요하고 무엇이 덜 중요한지 알 수 있다. 레이아웃은 공간이 한정된 작은 스크린에서 더욱 중요하다. 그리드시스템 그리드 시스템은 디자이너가 유사한 패턴 안에 존재하는 정보를 쉽게 조직화할 수 있게 .. 더보기
06_인터페이스 디자인의 기초 사람은 인터페이스를 통해서만이 디지털 제품과 관련을 맺을 수 있다. 디지털 디바이스와 대화를 하려면 커뮤니케이션의 중개자인 인터페이스가 반드시 필요하다. 인터페이스 디자인은 인터랙션 디자인의 '경험적 공유'일 뿐이며 인터랙션 디자인 자체가 아니다. 인터페이스는 사람들이 보도 듣고 느끼는 부분만을 담당하며 인터랙션디자인의 한 부분일 뿐이다. 인터랙션 디자이너는 인터페이스를 통해 해당 제품이 어떻게 사람과 연관을 맷고 어떻게 해당 제품이 어떻게 사람과 연관을 맷고 어떻게 그 제품이 현실적으로 반응할지를 결정한다. 인터페이스를 통해 제품의 보이지 않는 기능들이 시각적으로 보이고 연결되고 사용된다. 인터랙션 디자이너는 '제품'뿐 이니라 인터페이스가 물리적인 공간, 제품, 그리고 사람과 확연한 관계를 맺게 되는 .. 더보기
PART_2_20. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 원스톱 등록 (One-Stop Registration) *** - 디자인은 서비스의 전략적 방향성을 반영해야함 - 회원가입은 방문자가 해당 서비스에 대해 어떤 가치를 두고 있는지에 따라 결정될것임 - 가입할 만한 서비스라도 개인정보에 대한 우려와 가입절차에 대한 번거로움으로 인해 가입하지않는 경우도 있음 - 주민번호, 주소, 전화번호 등 사생활 침해가 우려되는 정보들은 가능한 등록 항목에서 제외 시킨다면 개인정보와 가입절차에 대한 신뢰도는 높아질것임 - 서비스전략 차원에서 결정할 문제 - 디자인은 전략적으로 회원가입을 위해 등록해야 할 항목이 적다는 점과 그 절차가 간편하다는 점을 수고할 필요가있음 - 원스톱 등록은 등록 절차가 간.. 더보기
PART_2_19. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 다이렉트 컨트롤 버튼 (Direct Control Button) *** - 오브젝트의 일부분으로 구성된 컨트롤 버튼 - 오브젝트와 컨트롤 버튼의 위치가 떨어져 잇으면 두 요소간의 연관성이 저하됨 - 오브젝트와 컨트롤버튼의 설꼐는 위치적 연관성이 먼저 고려되어야하며 그 다음 시각적 연관성이 고려되는것이 바람직함 - 직관적 디자인 구현이 가능 - 제어하는 오브젝트가 많거나 또는 오브젝트들이 분산배치되어 있는경우 마우스 궤적(mouse track)이 불필요하게 증가해 사용성이 저하될수 있는데 이 경우 리모트 컨트롤 버튼(remote control button)이 적합 - 다이렉트 컨트롤 버튼의 제공 여부가 결정되면 오브젝트가 어떤 조건일.. 더보기
PART_2_18. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 클릭 단서 (Clickability Cue) *** - 링크 여부를 직관적으로 판단할 수 있게 돕는 시각적 단서(visual cue)를 말함 - 색상(colored text), 밑줄(underlineed text), 그래픽 처리(graphic text) 등을 사용 - 좀더 강하게 유도하려면 아이콘을 곁들임 - 링크는 페이지 이동, 콘트롤 호출을 위해 사용되는 일종의 명령어(command)이므로 눈으로 보고 마우스로 클릭해야하는 대상 - 링크된 요소는 링크되지않은 요소와 구별 되어야 하며 그 기능성으 나타낼 수 있는 시각적 형태를 가져야 함 - 클릭단서를 제공하지않는다면 직관적이라 할 수 없음 - 클릭단서를 제공하지 않을경우 사용자는.. 더보기
PART_2_17. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 큰 입력 필드 (Large Input Field) *** - 입력필드가 클때의 효과 . 입력욕구 자극 . 입력필드를 쉽게 알수 있음 . 저시력자, 고령자를 위한 디자인 구형 . 입력행위에 좀더 집중 - 입력의 전략적 중요도를 판단하고 접근하도록함 - 입력필드 자체가 조형적 의미를 갖기때문에 다른 디자인 요소와의 조화를 고려 - 사람들의 고정관념때문에 적용에 장애가 발생할 수 있음 - 혁신전략을 가로 막는 4가지장애중 가장 먼저 꼽는는것은 혁신의 필요성을 인식하지 못하는 인지적 장애임 - 혁신적 UI를 설계하려면 간단한 사용자 리서치를 실시해 근거와 타당성을 마련하는 노력이 필요 벤치마킹 http://www.extratasty.com.. 더보기
PART_2_16. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 보기 옵션 (View Point) *** - 이미지를 필수로 포함하고 있는 정보를 배열하는 방식은 크게 리스트와 그리드방식이있음 - 사용자가 두가지방식을 선택할 수 있도록 한것을 보기옵션이라 부름 - 쇼핑몰에서는 보편화 - 리스트방식과 그리드방식의 레이아웃은 처리되는 정보의 양과 패턴이 다름 - 리스트보기에 의한 클릭 통계 . 상단에 위치한 정보들은 클릭율이 높고 중간과 하단 부분은 급격히 낮아짐 (그림1. 리스트로 보기(list view)에 대한 클릭 통계) - 그리드로 보기에 의한 클릭 통계 . 리스트로 보기보다 중간과 하단의 클릭률이 상대적으로 높음 (그림2. 그리드 뷰(grid view)에 대한 클릭 통계) (출처:http:.. 더보기
PART_2_15. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 강력한 그룹핑 (Strong Grouping) *** - 정보구조의 그룹핑에 따라 카테고리와 페이지가 만들어지고 화면구조의 그룹핑에 따라 헤더(header), 본문(contents), 푸터(footer)가 만들어지면서 분문구조의 그룹핑에 따라 그리드(컬럼)이 만들어짐 - 본문의 그룹핑은 주로 여백, 라인, 색상, 음영, 패널 들을 이용하는데 이중 가장 강력한 그룹핑은 패널(penel)을 이용하는것 - 패널은 여백, 라인, 색상,음영 기법이 결합되었지 때문에 그룹핑 효과가 클수 밖에 없음 - 패널의 가장 큰 특징은 시각적 명료성 - 이질적인 구성요소가 많은 페이지는 콘텐츠 성격에 따라 유목화(categorization)가 필요한데 이.. 더보기
PART_2_14. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 멀티 아이프레임 (Multi IFrame) *** - 페이지내에 다른 페이지를 포함 시키는 기법 - 두개의 프레임으로 만들어진 페이지는 두개의 html문서와 이를 하나로 묶는 html문서가 필요하기 때문에 브라우저는 세개의 html을 인식해야하고 브라우져의 '뒤로가기'버튼이 제대로 작동하지 않는 현상도 나타남 - 이미 XHTML 1.1 버전에서는 프래임 태그가 삭제 되었으며, 아이프레임은 비표준 태그로 브라우져 호환성(browerser compatibility)문제를 야기시켰기때문에 프레임 구조를 권장하지않는 편임 - 스크롤기능의 마우스가 보편화되고 동일 페이지 내에서 더 많은 정보를 제공하고자 하는 UI전략에 의해 아이프레임 사용.. 더보기
PART_2_13. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 탭 패턴 (Tab Patterns) *** - 탭에 의해 구현된 인터페이스(tabbed document interface, TDI)가 사용자에게 가용한 옵션과 현재 선택된 옵션을 재빨리 인식시켜주기때문에 한화면에 여러문서를 담아도 이해하기 쉬움 - 선택된 탭과 해당정보 영역이 시각적으로 연결된 형태가 가장 바람직하다 - 탭 인터페이스의 핵심 - 웹브라우져 익스플로러, 파이어폭스, 오페라에도 적용 - 구글의 '개인화된 홈'에도 사용 - 공간 활용도를 높여줌 - 너무많으면 복잡해보이고 많은 개념을 담기때문에 정보를 개괄적으로 이해시키기 어려워진다 - 초기화면의 비중이 높이지고 사용자들은 점점 깊은 정보구조를 싫어 하다보니 한 화면에서 .. 더보기
PART_2_12. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** URL 체계를 닮은 검색 인터페이스 (URL-like Search UI) *** - 모든 검색 맥락(context)을 한 줄의 URL 시스템에 담기 때문에 간결한 커뮤니케이션을 구현 - URL(Uniform Resource Locator)은 인터넷 상에있는 각종 정보들의 위치를 표시하는 표준 - 실제 사용자들이 URL을 이해하기란 쉽지않음 - 기계적으로 생성되는 URL은 개발자도 알 수 없을정도로 난해하기때문에 사용자가 직관적으로 이해할 수 있는 '의미적 URL (semantic URL)' 에 대한 필요성이 강조되고 있음 - 의미적 URL 시스템을 도입하게되면 사용자는 검색이나 메뉴기능을 이용하지않고 직접 URL을 주소창에 입력해 .. 더보기
PART_2_11. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 다중 검색엔진 인터페이스 (Multiple Search Interface) *** - 원하는 검색결과를 위해 여러검색엔진을 사용하는데 이때문에 예전에는 타사의 검색 링크를 결과에 제공하기도 함 - 트래픽위주의 비즈니스 모델이 정착되며 사라짐 - 다중 검색엔진(multiple search engines) 인터페이스는 여러곳의 검색엔진을 통합해 우너하는 정보를 하나의 인터페이스에서 찾을수 있게 함 - 이종 서비스간에도 데이터가 상호교류될 수 있는 웹 환경이 마지 않은 미래라고 가정한다면, 사용 상황에 최적화된 인터페이스를 제공하는 서비스가 경쟁우위를 갖게 될것임 - 다른 검색 엔진 인터페이스와 마찬가지로 검색링크, 검색옵션, 조작을 위.. 더보기
PART_2_10. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** PIP 인터페이스 (Picture-in-Picture Interface) *** - 메인화면과 별도의 서브화면을 동시에 제공하는 화면 구조 ( ex. TV - 화면속의 화면) - 동시에 여러가지 과업을 시도하려는 욕구 - 윈도우의 멀티테스킹(multi-tasking), 듀얼 모니터의 사용은 동시에 여러가지 과업을 수행하기 위한 해결책 - 아이프레임이나 독립적인 프로그램을 통해 정보를 보여주는 플래시나 위젯도 일종의 PIP 인터페이스로 볼 수 있음 - 효과를 거두기 위해서는 독립성을 갖는게 중요하며 이를 위해서 자체 정보에대한 제어기능을 스스로 갖추어야하며, 이를 위해 컨트롤바 또는 브라우져를 별도로 갖추어야 함 - 서브화면이라는 점.. 더보기
PART_2_9. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 카토그래피 인터페이스 (Cartography Interface) *** - 사전적 정의는 지도나 지형모형, 지구의 작성, 표현, 교육 등의 이론과 기술에 관해 연구하는학문 - 'cartography' 대신 'map-making' 이란 용어를 사용하기도함 - 정보학이나 IT에서는 공간 데이터(spatial data)를 시각화하는 기법이나 방법으로 알려져있으며 'interactive data map'이란 용어를 사용하기도 함 - 우리가 경험하는 웹 사이트의 정보구조는 계층적이고 순차적인 트리구조(tree structure)와 리스트 구조(list structure)에 의존하고 있음 - 지도는 우리가 눈으로 보고 있는 실제 세계를 카토그.. 더보기
PART_2_8. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 위키 타입 인터페이스 (Wiki-type Interface) *** - '참여, 공유, 개방'을 표방한 웹2.0의 철학에 가장 근접한 모델 - 보편화된다면 검색이나 블로그처럼 정보찾기의 주류로 부상할 것임 - 집단지성(collective intelligence)의 고질적인 페해인 아마추어리즘(amateurism)과 부도덕을 넘어야함 - 디자인측면에서는 위키모델에 대한 사용자의 심성모형(user mental model)이 불완전함 - 위키에서 사용자는 독자, 필자, 편집자, 관리자, 협력자, 참여자 등의 역할을 필요로 하거나 또는 상황에 따라 수행하게 되는데 이때마다 사용자는 다른 개념으로 위키모델을 바라보게됨 - 위키모델은 UI 디.. 더보기
PART_2_7. 인터페이스 디자인 (INTERFACE DESIGN) PART_2. 인터페이스 디자인 (INTERFACE DESIGN) *** 포스트잇 타입 인터페이스 (Post-it Like Interface) *** - 포스트잇처럼 쉽게 붙였다 떼었다를 쉽게할 수 있는 UI - 포틀릿 기반의 인터페이스와 비슷한개념이지만, 컨테이너 크기가 다양하고 배열을 자유롭게 할 수 있다는점이 틀림 - 내용에 따라 컨테이너(container)크기가 달라지는것은 내용과 내용을 담는 틀(UI)에 대한 정의이며 내용의 규격화를 추구할것인지 아닌지는 전략적 선택 - 내용에따라 달라지는 컨테이너의 크기때문에 복잡해보일수 있지만 내용에 맞춰 컨테이너UI를 설계하기때문에 내용 전달 측면에서는 포틀릿 방식의 인터페이스 보다는 효과적임 - 사용자의 니즈가 자주 바뀌는 경우에 적합하다 - 인터랙션 측.. 더보기

티스토리툴바