UX의 이해

다음 책에서 발췌하여 정리한 내용임.

• 눈길을 사로잡는 스마트폰 앱 UX&UI 디자인(김영삼, 위키북스, 2014)
• 사용자 경험을 창조하는 모바일 UX/UI 가이드북(이광훈, 프리렉, 2013)

UX란

사용자는 실제 서비스를 보기 전엔 그 서비스를 원했는지조차 모른다. UX란 뭔가를 보고 “오 멋지다 이거 신기한걸?”이라고 느끼는 것이 아닙니다. “그래! 맞다 맞아~! 이게 필요했었어!”라고 느끼는 것이 바로 UX입니다. -스티브 잡스-

UI 디자인 원칙

메타포

사용자들이 의미를 인식할 수 있게 함. 문화적, 언어적 장벽을 쉽게 극복할 수 있음.

Direct Manipulation

사용자로 하여금 버튼이나 아이콘을 이용해 직접 제어하고 있다는 느낌이 들게 함.

• 아이콘을 누르면 바로 실행됨
• 아이콘을 직접 드래그해서 휴지통에 버림
• 장면과 장면 사이의 흐름을 애니메이션으로 보여줘서 사용자가 실해안 화면이 확실히 실행되고 있음을 알려줌.

보고 선택하기

조작과 상호작용을 할 때 자신이 무슨 일을 하고 있는지 직접 확인해서 지정할 수 있도록 해야 함

반응과 대화

사용자에게 시스템이 현재 무슨 일을 수행하는지 시각적, 청각적, 진동 등과 같은 신호를 제공해 즉각적으로 알려줘야 함.

• 특정 메뉴 터치시 작은 진동을 느끼게 해서 현재 휴대폰이 작동되고 있음을 감지하게 하는
• 기능작은 키패드를 터치했을 때 누른 글씨를 크게 보여주는 기능

관대함

시스템에 손상과 무리를 주지 않는 범위에서 모든 일을 사용자가 편하게 조작할 수 있게 해야 함

Aesthetic Integrity

미적 완전함. 제품과 콘텐츠가 지닌 최상의 디자인과 기능, 정보가 잘 조직되어 시각 디자인의 원칙에 일ㅣ해야 함.

• 너무 많은 버튼, 복잡한 아이콘, 레이아웃의 부담감 줄여야
• 난해하거나 임의적인 그래픽 이미지 사용 금지
• 사용자가 기대하는 행동에 그래픽 요소를 맞춤
• 버튼은 옆으로 밀리는 것이 아니라 눌려지는 것처럼 보이게 함.
• 화면 중심에 밝은 색, 테두리에 진한 색 배경을 넣어 직관적으로 중심이 중요하게 보이게 함.
• 확인 버튼 배경은 밝게, 취소 버튼 배경은 어둡게 하여 긍정 부정을 직관적으로 나타냄

사용자에 대한 이해와 접근성

제품 또는 콘텐츠 사용 의도를 파악하고 그에 맞는 UI 구성

조직성

일관성 있는 개념적 구조 제공. UI의 통일성과도 연관이 있음.

경제성

최소한의 표현으로 효율을 극대화.

의사소통

가독성, 타이포그래피, 색상, 질감, 메타포, 아이콘 등의 요소를 적절히 사용하고 사용자와 콘텐츠 간의 규칙을 단순화

장애인을 위한 디자인 원칙

웹 접근성, 시청각 장애인을 위한 줌 기능, 경보, 진동과 같은 기능 부여

모바일 UI 디자인 원칙

일관성 있는 UI

Consistency.

• 내적 일관성 : 브랜드의 인지도를 높이고자 같은 브랜드 내에 유사한 UI 체계를 갖추는 것
• 외적 일관성 : 모바일 UI가 공통으로 지닌, 이를테면 UI 가이드라인 같은 규칙
• 미적 일관성 : 폰트와 색상, 아이콘과 캐릭터, 스타일(CSS), 테두리, 배경이미지, 효과 적용 등의 시각적 디자인의 유사도를 갖추는 것. 웹에서의 Look & Feel과 유사

효과적이며 개인화된 UI

• 개인화 UI 제작
  • 환경에 따른 옵션 설계
  • 콘텐츠 자동 정렬
  • 태깅, 별점 부여, 즐겨찾기 기능
  • 필터링
• 빠르게 활용할 수 있는 툴바 디자인
  • 중요하고 가장 자주 반복해서 사용하는 기능은 별도로 그룹화된 툴바에 넣는다.
  • 툴바는 항상 보이게 디자인하며 콘텐츠와 함께 스크롤 되지 않게 한다.
  • 툴바는 화면 아래쪽 혹은 위쪽에 배치한다.
• 효과적인 초기 화면(Landing Page) 디자인
  • 빠르고 쉬운 사용을 위해 중요한 기능은 크고 단순화된 텍스트 버튼을 사용한다.
  • 불필요한 탭 바와 표준이 아닌 어설픈 아이콘은 사용하지 않는 것이 좋다. 단, 탭바가 필요하면 전역 메뉴(GNB) 형태로 사용한다. 독립된 기능이나 화면 이동을 나타내는 아이콘은 사용자가 모를 수도 있으며 공간 낭비인 경우가 많다.

입력이 쉬운 UI

• 개별화된 키패드 : 생년월일을 입력하는 입력란에는 숫자만 입력할 수 있는 키패드 설계, 선택 옵션 도구인 피커 이용.
• 자동완성 기능
• 음성 인식
• 목록화를 통한 선택 입력 방식
• 비정형 데이터 자동 입력 : 내장센서(GPS, 시계, 카메라, 오디오 등)를 이용하여 비정형 데이터 자동 입력

대중적인 미학을 지닌 UI

• 누구나가 별다른 학습 없이도 이해할 수 있는 공통으로 익숙한 아이콘 사용.
• 목록에 이미지 사용시 작은 사각형 형태의 섬네일 이미지 사용.
• 모바일 UI는 원칙적으로 가로와 세로 화면 모두를 지원해야 한다. 특히 5인치 미만의 스마트폰보다는 7인치 이상의 태블릿 PC에서 이 원칙을 꼭 지켜야 한다.
• 시각 요소와 함께 오디오 요소도 첨가한다.

오류에 대응하는 UI

N스크린의 확대로 인한 오류, 네트워크 불통인 음영 지역에서의 서비스 오류 증가. 오류를 사전에 방지할 수 있는 UI로 사용성을 높인다.

• 입력 오류 방지 : 입력 오류 최소화를 위해 필수 입력란과 선택 입력란으로 나눈다.
• 오류 경고창 표시 : 오류가 발생하면 그에 해당하는 경고창을 띄우며, 경고창 문구는 전문 개발용어 대신 공손한 실생활 단어를 사용한다. 이때 명심할 것은 '사용자는 결코 실수하지 않는다'라는 자세이다.

인체 공학적 UI

• 인체 공학적 UI를 고려해야만 하는 이유
  • PC보다 제한된 하드웨어 : 작은 화면 크기와 CPU의 처리 속도, 메모리 용량, 입력의 제한
  • 이동하는 환경에 적응 : 주변의 빛에 따른 화면의 밝기, 한 손으로 조작이 가능, 화면을 볼 수 없는 환경에서 정보 확인 등
  • 사용자 개인별 환경 : 장애인, 색맹, 어린이, 노인, 성별, 개인 선호 취향 등
• 시각적 인지 향상
  • 색깔 대비 : 버튼과 텍스트에 적용하여 콘텐츠를 쉽게 인지하도록 돕고, UI 요소와 배경을 쉽게 구별할 수 있도록 한다. 흰색과 검은색은 색깔 대비 효과가 가장 크다.
  • 그룹화 : 색과 모양, 동작에서 공통점이 있는 버튼이나 텍스트는 그룹화한다.
  • 폰트 크기 : 보는 데 불편하지 않을 만큼이 아니라 즐길 수 있을 만큼 폰트는 커야 한다.
  • 폰트 : 가독성이 뛰어난 폰트를 사용. 보통 운영체제 개발사들이 표준으로 내놓는 폰트가 있는데 그 폰트가 사실 가장 가독성이 뛰어난 폰트이다.
  • 여백 : 가독성을 높이도록 상화좌우 일정한 여백을 준다.
  • 단락과 제목 사용 : 페이지보다 긴 텍스트가 나오면 단락과 제목을 사용하여 사용자가 긴 문장을 끊어 읽을 수 있게 하거나 핵심 문구를 빠르게 살펴볼 수 있게 한다.
  • 간결한 언어 사용 : 자신이 기획하는 모바일 서비스를 지역화하려는 경우 주의 깊게 텍스트 길이를 고려한다.
• 조작의 편리성 향상
  • 한 손으로 중요한 기능 제어 가능해야 함. 엄지손가락이 닳을 수 있는 영역(Thumb zone)을 표시하고 그 영역에 핵심적인 내비게이션 메뉴를 디자인한다.
  • 정전식 터치 스크린에서의 터치영역은 최소 지름 8~10mm, 버튼의 크기는 44*44 픽셀 정도이다.
  • 내비게이션 메뉴는 될 수 있으면 4~5개로 단순화.
  • 시선 추적 활용. 화면이 큰 태블릿 같은 경우 시선 방향 고려하여 내비게이션과 콘텐츠 영역 구분.
• 콘텐츠 중심의 설계
  • 실제 사물의 은유 사용.
  • 메뉴나 화면을 움직이면서 서비스나 메뉴의 모습을 시각적으로 보여주는 동작 UI 요소를 간단하게 설계.
  • 새로운 시각화 방법으로 화면의 이동에 따른 피벗이나 파노라마 같은 기법 활용.

아날로그적인 UI

• 우리가 일상생활에서 익숙한 요소들을 잡아서 표현. 보통 모바일 운영체제 개발회사에서 제공하는 아이콘을 사용하면 문제 없음.
• 새로운 아이콘 디자인시에도 기존 아이콘의 핵심 요소 유지. 기존 아이콘 결합/분리 등으로 새 아이콘 디자인.
• 문화적 특성 고려하지 않으면 국가별, 지역별 사용자에게 외면받기 쉽다.
• 정보를 나타내는 용어는 반드시 일상생활에서 자주 쓰는 문구로 표현한다.
• 이미 존재하는 사물 그대로를 은유로 표현하는 것이 좋다.

상태를 표시하는 UI

• 현 화면의 위치 알려주어야 한다.
• 보통 현재 상태는 화면 위쪽의 내비게이션 영역에 계층 순서대로 표시.
• 화면 터치로 이젠 메뉴로 돌아가게 링크하는 것은 혼란을 줄 수도 있다.

모바일 앱 개발시 디자인 관련 사이트

• 아이콘 파인더 (http://www.iconfinder.com) : 아이콘, 메타포 이미지 무료 제공
• 앱 디자인 레퍼런스
  • http://scoutzie.com
  • http://dribble.com
  • http://www.lovelyui.com
  • http://pttrns.com
  • http://www.behance.net
• 안드로이드 색상 팔레트 (http://developer.android.com/design/style/color.html)

안드로이드 10가지 UX 디자인 원칙

구글의 안드로이드 UX팀은 실용적이면서 빠르고, 단순하면서 매력적이고, 혁신적이면서 보편적이고, 유익하면서 아름답고, 신뢰할 수 있는 디자인을 창작하는 것을 목표로 함.

• Useful:Focus on people - their lives, their work, their dreams.
  • 억지로 사용자 삶에 끼어들지 않고 자연스러운 흡수 추구
• Fast: Every millisecond counts.
  • 충분한 이유 없이 속도를 희생하지 않음. 불필요한 클릭, 타이핑 배제
• Simple: Simplicity is powerful
• Engaging: Engage beginners and attract experts
  • 초심자에게는 경험을 주고 전문가는 매혹시켜야 함
• Innovative: Dare to innovate
• Universal: Design for the world
  • 지구촌 모든 사람을 위한 설계
• Profitable: Plan for today's and tomorrow's business
  • 사용자들의 목표와 사업적 고려를 한결같이 통합. 광고는 반드시 광고답고 유용해야 함.
• Beautiful: Delight the eye without distracting the mind.
  • 긍정적인 첫인상. 최소한의 장식. 군더더기 없이 빠르게 로드되고 사용자들의 목표를 달성하는데 방해를 주지 않는 디자인.
• Trustworthy: Be trustworthy of people's trust
  • 사람들에게 확신과 신뢰를 주어야 함.
• Personal: Add a human touch
  • 인간미를 보탬. 문자와 디자인 요소들은 친근하고 빠르고 재치가 있으면서 지겹지 않고 거만하지 않아야 함

와이어프레임 키트

모바일 서비스에 주로 이용하는 템플릿과 스텐실, 아이콘을 파워포인트나 일러스트레이터, 포토샵 등의 형식으로 배포하는 형태를 와이어프레임 키트라고 한다.

• http://balsamiq.com : UI 스텐실 세트 제공.
• http://www.designshock.com : 실제 모바일 앱에 적용되는 디자인 형태로 제공.
• http://cacoo.com : 크롬 웹앱으로 개발되었으며, 웹에서 다이어그램을 만들 수 있는 도구이다.
• http://www.droiddraw.org : 구글이 개발한 안드로이드 전용 UI 설계 프로그램으로 무료로 다운 가능.
• Android GUI Prototyping Stencil (http://www.artfulbits.com/products/android/try/visio-stencils.aspx) : 안드로이드용 GUI 스텐실을 사용하여 비지오에서 사용하는 도구로, 미리 만들어진 다양한 템플릿을 편리하게 사용할 수 있다.