UI/UX 디자인 전략의 이해
최적의 사용자 경험을 제공하기 위해서는 사용자의 니즈, 문제, 맥락, 동기, 태도, 이용 형태 등의 사용자 분석을 통한 사용자 이해로부터 출발해야 한다.
1) 현재 상황에 대한 정의 : 경쟁 분석, 비지니스와 상품, 서비스의 목적을 정의한다. 사용자에게 전달하고자 하는 가치를 정의하고, 문제점과 비지니스의 관점에서 일고자 하는 것이 무엇인지 파악
2) 요구 사항에 대한 정의 : 목표를 명확히 세우고, 사용자로부터 요구 사항들이 무엇인지 구체화함.
3) UX 가치의 측정 : 앱에서의 경험이 어떠했는지 정의할 수 있어야 한다.
UI/UX 디자인 콘셉트의 정의
디자인 콘셉트의 요소
1) 이슈 추출 : 앰 서비스의 문제점을 파아하는 것으로 사용자 관점에서 바라본다. 앱 서비스의 목적과 실제 앱 서비스가 그 목적을 이루게 하는가, 그리고 콘텐츠나 기능적 문제점, 디자인적 문제점을 찾아내 개선해야 하는 점과 지향하는 방향을 설정하는 단계
2) 사용자 니즈 : 사용자로부터 발견한 다양한 문제점들을 분석하여 구체적인 개선 방향을 찾고 사용자에게 제공해야 할 앱 서비스의 가치를 도출
3) 콘셉트 키워드 도출 : 사용자에게 제공하고자 하는 가치를 수립하고 최종 콘셉트를 선정하여 적절한 키워드를 추출
디자인 콘셉트 정의 시 유의사항
- 사용자 특성에 부합하는가, 차별성을 가지는가, 균형을 이루고 있는가, 구현상의 문제점은 없는가, 지나치게 많이 도출되지 않았는가, 정돈된 언어로 전달되는가.
- 화려한, 차분한 등 형용사적 언어를 사용하기도 하는데, 그 의미가 명확하게 전달될 수 있어야 한다.
사용자 니즈 중심의 디자인 콘셉트
1) 감성적 니즈 : 즐거움, 만족감, 색, 형태, 재질과 같은 앱에 대한 심미적이고 감성적인 니즈
2) 기능적 니즈 : 사용자가 UI를 이용하며 느끼는 앱 서비스에 대한 실용, 효과, 효율성과 같은 기능적인 니즈
3) 인지적 니즈 : 제품 및 서비스에 대해 분명하게 이해하고 인식하고 의미를 부여하는 인지적인측면의 니즈
4) 신체적 니즈 : 제품의 그립감이나 촉감 등 신체적인 니즈를 말함
UX디자인 전략으로부터 디자인 콘셉트를 도출
1) 한눈에 파악하기 쉽게 이해하기 쉬운 레이아웃이 적용된 화면 제공
2) 심미성이 좋으나 사용에 어려움이 있을 수 있기에 가시성 높은 폰트를 제공
3) 콘텐츠를 텍스트로만 구성하는 것은 사용자의 입장에서 지루함을 느끼거나 한눈에 쉽게 파악되지 않는 어려움이 있어 피해야함
4) 적합한 색채 조합을 통해 시각적 피로도를 고려해야 한다
5) 화면에 따라 크기의 비율은 달라질 수 있으나, 버튼과 아이콘 이미지에 대한 전체적인 통일성 맞춰야함
6) 각 화면에 강조할 요소를 표현하려고는 하되 일관된 화면 레이아웃을 제공해야 함
포지셔닝 전략
어떤 특정 타깃 사용자 그룹을 정한 후 경쟁사와 다른 차별적인 특징을 각인시키려는 전략을 짜고 구사하는 마케팅 활동
1) 속성에 의한 포지셔닝 : 기능적 편익, 혹은 제품/서비스의 속성에 의한 포지셔닝
2) 이미지에 의한 포지셔닝 : 제품/서비스의 상징적, 감각적 편익과 같은 추상적 편익을 강조하는 방법
3) 사용 상황과 목적에 의한 포지셔닝 : 제품/서비스가 사용되는 상황이나 목적을 묘사하는 방법
4) 사용자에 따른 포지셔닝 : 제품/서비스의 사용자나 소비 계층을 이요하는 포지셔닝 방법
5) 경쟁 제품/서비스에 의한 포지셔닝 : 사용자의 지각도에 위치하는 경쟁자 제품/서비스를 명시적으로 묵시하는 방법
6) 리포지셔닝 : 사용자의 지각도는 시각이 지나고 경쟁 환경과 소비 계층의 유행 욕구가 변화할 때에 소멸
이미지 포지셔닝의 수행 방법과 순서
1) 대표 디자인 콘셉트 키워드 선정
2) 키워드 배치
디자인 콘셉트의 시각화 요소
1. 시각 디자인 요소
앱의 시각 디자인의 요소에는 크게 타이포그래피, 색체, 레이아웃 등이 있다.
앱 디자인에서 타이포그래피가 이미지로 사용될 경우에는 시인성이 있어야 하고, 본문의 내용으로 쓰일 경우에는 가독성이 좋아야함
2. 디자인 키워드 성정 단계에서의 고려사항
타깃 사용자 그룹에 대한 분석 자료를 바탕으로, 사용자의 이용 목적과 사용 형태, 숙련도, 신체적 또는 심리적 특성, 선호하는 디자인 스타일 등에 따라 디자인 방향을 설정해야 하기 때문이다.
3. 키워드 도출
GUI 콘셉트 수행
무드보드 제작
1) 타이포그래피 : 서체 스타일은 한글의 경우 고딕, 명조 계열로 나뉘고 영어의 경우에는 세리프체와 산세리프체로 ㅜ분. 같은 서체일지라도 자간이나 행간에 따라 가독성이 달라진다.
2) 색채 : 색 선정을 위해 선정한 디자인 키워드에 적합한 이미지 자료 수집. 이미지는 앱과 직접 관련된 것이 아니어도 무관함. 이미지에서 느껴지는 전반적인 분위기나 색조가 키워드에 부합하는 것을 선택할 수 있다.
3) 레이아웃 : 레이아웃을 선정할 떄에는 선정한 키워드에서 연상되는 형태에서부터 접근할 수 있다.
4) 기타 무드 보드 잘로 활용할 요소들을 수집
GUI 디자인 구성의 요소
GUI는 사용자와 시스템 간의 상호작용과 소통을 원활하게 하기 위한 그래픽 기반의 인터페이스.
1. 모바일 앱 GUI 디자인 특징 : 작은 디스플레이 화면 크기에서 사용자 경험을 고려해야 한다는 것이다.
2. GUI 디자인의 구성 요소 : 크게 시각적 요소와 기능적 요소로 나뉜다.
1) 레이아웃 : 일정한 화면 공간 안에 일러스트레이션, 사진, 타이포그래피 등의 시각적 구성 요소들을 디자인의 목적에 맞게 배치하는 것
2) 컬러 : 컬러는 사용자가 가장 만저 지각하고 인지하게 되는 GUI요소로서, 너무 많은 색상을 선택하기보다는 색조 활용을 통하여 변화를 주는 방법이 일관성을 높일 수 있다.
3) 타이포그래피 : 문자 형식의 정보 전달 GUI 디자인 요소로서 사용자가 해당 내용을 쉽고 빨리 읽을 수 있게 하는 가독성이 있어야 한다.
4) 그래픽 : GUI 요소 중 그래픽은 아이콘, 일러스트레이션, 사진, 그래프 등을 포함하며 문자 대신 정보를 더욱 효과적으로 전달할 수 있는 수단이다. 심벌형, 텍스트형, 조합 형이 있다.
5) 메뉴 : 사용자가 앱을 사용하는 목적과 직접 관련 있는 콘텐츠와 연결되는 GUI의 기능적 요소이자 콘텐츠를 이용하는 데 필요한 다양한 직업의 기능을 제시해 주는 목록
3. GUI 디자인의 기본 원칙
1) 가시성 : 시각적으로 분명하게 잘 보이도록 나타내는 것. 이해성과 밀접한 관련
2) 이해성 : 사용자가 GUI를 조작하는 경우 대상의 내용과 조작 방법을 유추하거나 해석할 수 있게 해야함
3) 일관성 : GUI 시각적 구성 요소 표현의 일관성 및 조작 방식에 일관성을 제공함으로써 사용자가 쉽게 기억하고 빠르게 적응할 수 있게 하여야 한다.
4) 사용성 : 사용자가 목적을 달성하기 위해 GUI를 사용할 떄에 어느 정도 사용하기 쉬운가를 말하는 용어.
5) 심미성 : 시각적 디자인이 기능성에도 영향을 미치기 때문에 심미적 측면을 고려해야함
스타일 가이드의 작성
스타일 가이드란 모바일 앱 화면의 디자인 요소들을 규정한 표준 문서
1. 모바일 앱 스타일 가이드 작성 목적 : 스타일 가이드의 목적은 사용자에게 일관된 사용자 경험을 전달하기 위해 여러 화면에 대한 스타일과 형식을 같게 적용할 수 있는 디자인 표준안을 규정하기 위한 것이다.
2. GUI 스타일 가이드 구성 요소
1) 앱 UX 디자인콘셉트
2) GUI 디자인 시각적 구성 요소
3. GUI 스타일 가이드 작성시 고려 사항
1) 타깃 사용자 그룹의 특성 : 앱의 비주얼 디자인으로부터 전달되는 느낌이나 분위기도 타깃의 선호도에 부합될 수 있도록 구상하여야 한다.
2) 사용 목적 및 상황 이해
- 가 : 정보 전달 목적
- 나 : 상업적 목적 : 가능한 한 정보를 편리하고 빠르게 찾고 원하는 작업을 분명하게 처리할 수 있는 서비스
3) OS별 가이드라인 : 모바일 운영체제 제작사들은 모두 해당 OS를 위한 디자인을 규정하고 있다. 애플은 OS X와 IOS에 대한 가이드라인을, 구글은 머터리얼 디자인 가이드라인을 제공한다.
모바일 운영 체제별 UI 특성 이해
- OS에 기본 탑재된 네이티브 앱보다는
- OS에서 다운받아 사용하는 서드파티 앱이다.
1. 모바일 OS별 화면 구성의 차이점
- 탭바, 네비게이션 바, 앱 바 등 여러가지 용어로 사용. 앱 바와 탭 바가 내비게이션 기능을 구현하기도 함.
- 안드로이드와 iOS OS에서 제공하는 기본 GUI의 구성 요소는 크게 바, 콘텐츠 뷰, 콘트롤, 임시 뷰로 나누어 볼 수 있다.
2. iOS 및 안드로이드 GUI 구성 요소 및 종류
1) 바 : 현재 사용자가 어느 화면에 있는지에 대한 정황을 알려주고, 사용자가 다른 화면으로 이동하거나 다른 작업을 수행하고 조정할 수 있도록 콘트롤 요소를 제공하기도 함. 상태 바, 내비게이션 바, 툴 바, 탭 바 등이 있음
2) 콘텐츠 뷰 : 사용자가 스크롤하거나 재배치, 추가, 제거하는 등 사용자 행동이 발생함
3) 콘트롤 : 사용자가 조정할 수 있는 UI 구성 요소. 상세 정보를 확인할 수 잇는 버튼이나 스와이핑을 통해 페이지를 넘겨볼 떄 사용자 위치를 보여주는 페이지 콘트롤
4) 임시 뷰 : 탬포러리 뷰는 사용자에게 중요한 정보를 알려주거나 추가적인 선택, 또는 선택 가능한 대안을 보여주기 위해 일시적으로 나타내는 것.
3. 안드로이드와 iOS GUI 구성 요소 차이점
1) 내비게이션 바 : 안드로이드 액션 바에는 주로 사용자 액션 실행이 가능한 버튼이 배치됨. 아이콘 및 정보 문구가 제공되어 사용자가 액션을 실행할 경우 선택 가능한 기능들이 제공된느데, 되돌아가기 버튼이나 정보 더보기 버튼 등을 제공하여 사용자의 작업 지원
2) 탭 바 : 알드로이드는 탭 영역에서 좌우 스크롤링과 콘텐츠 영역에서 플리킹, 좌우 스크롤링 탭 기능 제공을 통해 사용자에게 제어할 수 있도록 한다. iOS는 사용자 경험을 고려해 탭 바 메뉴 개수가 많아지면, 더 보기 버튼이 생성되며 더 보기 버튼을 탭하면 추가 메뉴리스트로 이동하는 고정 탭 방식을 유지하고 있다.
3) 기타 : 콘트롤 요소에서는 안드로이드의 경우 토글버튼, iOS의 경우 스위치라는 용어를 사용하며 임시뷰의 구성에서도 서로 유사한 형식을 사용.
이러한 GUi 구성 요소는 사용자가 한눈에 기능의 사용 방법을 예측할 수 있도록 단순하고 명확하게 디자인 되어야 하며, 특히 컬러의 속성을 적극적으로 활용해야함.
ON, OFF의 두 가지 옵션에 컬러를 적용할 떄 빨강과 초록 등 서로 대비되는 색상을 사용함으로써 사용자는 두개의 상호배타적인 상태를 쉽게 인지할 수 있음
GUI스타일 가이드 적용을 통한 시안 디자인 목적
1) GUI 스타일 가이드 적합성 확인 및 수정 사항 발견
2) 팀원들 간 원활한 소통
3) 본격적인 디자인 개발 전 오류의 최소화
4) 사용성 검토
5) 전체적인 룩 앤 필 검토
모바일 앱 GUI 디자인의 원칙
1) 단순성 및 사용성
2) 심미성, 명확하고 직관적인 정보 전달력
3) 모바일 환경에 적합한 최적의 사용자 경험
시안 디자인 검토 사항
1) 시각 디자인 요소에 대한 검토
2) 사용자 경험 측면에서의 검토 : 사용자 입장에서 모든 그래픽 요소가 한눈에 들어오는지, 콘텐츠가 적절하게 구성되었는지, 쉽게 사용법을 추측할 수 있ㄷ록 요소들을 디자인하였는지, 전반적인 룩앤필이 디자인 콘셉트와 앱의 주요 목적에 부합하는지 검토
3) 기능 구현의 가능성 검토
4) 주요 화면에 대한 검토
5) 사용자 경험 측면에 대한 검토
모바일 앱 화면 GUI 디자인의 원칙
1) 메타포 : 낯선것을 익숙하게
2) 직접 조작감
3) 직관적 디자인
4) 반응과 대화 : 일어나는 일에 대해 가능한 즉각적으로 알려줘야함. 시각적 혹은 청각적으로 피드백 해야함.
5) 정보 시각화 : 정보를 잘 조직화하여 비주얼 디자인 원칙에 일치하도록 표현
6) 접근성 : 평균 사용자 외에도 다른 대상층을 염두에 둬야함
7) 조직성 : 일관성, 화면 레이아웃. 내비게이션 사용성 등의 원칙들이 지켜 사용자에게 일관성 있는 개념적 구조를 제공해야함.
8) 경제성 : 간결성, 명료성 등의 하부 원칙과 함께 중요한 정보를 다른 정보와 차별화 시키고 강조함으로써 달성되는 개념
GUI의 인지적 오포던스
1. 모바일 앱에서의 어포던스
사용자는 앱의 화면 정보를 지각, 인지하여 특정 행위를 통해 반응하게 되는데, 이때 사용자가 가장 먼저 접하는 것이 GUI 요소이다. 예를 들어 사용자가 과업 수행 시 다음 단계로 너어가기 위해 버튼을 터치해야 한다면, 해당 버튼에 어포던스를 부여해 사용자의 다음 행위를 끌어내야한다.
2. GUI의 어포던스
1) 감각적 어포던스 : 사용자가 정보를 이해하는 데 도움이 되는 디자임. 쉽게 읽을 수 있는 레이블의 글씨 크기와 컬러 등 가시성을 충분히 고려한다.
2) 물리적 어포던스 : 사용자가 행위를 돕는 디자인으로, 정확한 반응을 고려하여 충분히 큰 버튼을 제공한다.
3) 인지적 어포던스 : 사용자의 예측을 돕는 디자인으로, 버튼을 클릭하면 무슨 일이 일어날지 암시한다.
4) 기능적 어포던스 : 사용자 작업을 완수하는 데 도움이 되는 디자인으로, 일련의 선택 목록을 미리 보여준다.
UX/UI 디자인 프로토타입 제작
1. 프로토타입의 이해
프로토타입은 앱 개발 접근법의 하나로서, HCI 분야에서는 개발 초기에 시스템의 원형 또는 전형적인 예, 기초 또는 표준을 만드는 것을 의미한다. 프로토타입을 만들어 사용자에게 직접 사용해 보게 하는 사용성 테스트를 통하여 기능, 콘텐츠, 디자인의 추가나 변경, 삭제 등 수정 및 요구 사항을 수집한다.
프로토타입은 실제 출시된 시스템처럼 완벽하게 기능을 갖춘 형태가 아니며 개발 이전에 시스템의 문제점들을 발견하기 위해서, 또는 특정 사항들을 사용자를 통해 확인 및 평가를 위해 사용된다 할 수 있다.
프로토타이핑의 장점과 단점
1) 장점
- 앱을 실제로 개발하기 전 사용자로부터 관련 검토 및 피드백을 받을 수 있다
- 신속한 제작이 가능하며 반복을 통해 향상된 결과물을 얻을 수 있게 해준다
- 설계 과정 초기 단계에서도 잠재적인 사용성의 문제를 발견할 수 있다
- 테스트에 드는 비용과 위험 부담이 적다
2) 단점
- 앱 UI의 일부만 재현한 것을 테스트하기 떄문에 사용성을 과대 평가할 수 있다.
- 전체 테스트 참가자의 요구 사항 수집에 대한 운영 및 통제가 어려우 수 있다.
- 부분적인 프로토타이핑을 하는 경우 테스트 범위 및 결과가 협소해질 수 있다.
프로토타이핑 유형의 구분
1) 저수준 프로토타이핑 : 주로 종이 위에 손으로 대략 스케치 한 것을 프로토타입으로 활용하는 종이 프로토타이핑
특성 가 ) 종이를 도구로 사용하기 때문에 시간과 공간에 대한 제약 x
나 ) 제안하고자 하는 앱의 기능이나 인터랙션, 서비스 등에 대한 사용자의 피드백 얻음
다 ) 시안을 활용해 사용자들이 원하는 기능이나 디자인에 대한 의견 수렴 및 아이디어를 통해 디자인 개선
2) 고수준 프로토타이핑 : 완성품에 가까운 디자인의 시제품. 소프트웨어의 베타 버전 등 최정 결과물과 유사도, 완성도가 높은 프로토타입을 활용하는 방법
특성 가 ) 서비스 개발 전 미처 발견하지 못한 작은 문제점들을 찾아 수정하는 데에 적합한 프로토타이핑 유형
나 ) 개발 기간이 매우 짧은 경우에는 여러 정황상, 사용성 평가를 진행하는 것이 어려울 수 있다.
다 ) 획기적인 서비스 개발이나 디자인 기획, 중요한 프로젝트, 많은 수익이 기대되는 제품/서비스에 적합하다
제이콥 닐슨의 UI 디자인 가이드
조건 내용
메타포 효과적인 아이콘의 사용
직접 조작 사용자 행동에 대한 반응 제공
보고 선택하기 사용자가 보는 대상에 대한 표시 및 선택 지원
반응과 대화 시스템의 상황 전달 및 즉각적 반응
관대함 안전한 자유도 제공
미적 완전함 그래픽 요소를 이용한 미적 시각 디자인
사용자에 대한 이해 사용자 능력 배려
접근 가능성 다양한 사용자의 사용성에 대한 고려
조직성 안정적이고 일관성 있는 구성
간결성 간결하고 명료한 디자인
의사 소통성 가독성, 타이포그래피 등을 통한 효율적 정보 전달
모바일 앱 UI의 사용성 평가 : 디지털 프로토타이핑을 이용한 사용성 테스트는 사용자가 실제 모바일에서 앱을 이용하는 것 처럼 모바일 앱을 통해 화면에서 터치 제스처, 화면의 이동, 터치에 따른 반응 등의 기능에 대한 UI 조작 및 인터랙션, 콘텐츠 구성, 내용, 흐름 등을 경험할 수 있다.
1) 제이콥 닐슨의 사용성 평가 원칙
가 ) 학습 용이성
나 ) 효율성
다 ) 기억 용이성
라 ) 에러 : 시스템을 사용하는 동안 가능한 에러율이 적어야하고 에러에서 쉽게 벗어날 수 있어야함
마 ) 만족도 : 사용자가 시스템을 사용할 때 느끼는 주관적 만족감이 높아야 한다는 것
2) 앨리슨 J 헤드의 사용성 평가 원칙
가 ) 작업 지원 수준
나 ) 사용 편리성
다 ) 미학적인 구성 : 사용자가 시스템의 전반적인 비주얼 디자인 및 시각적 요소의 표현, 배치 등을 통해 이용 편의를 증진하고 심미적으로 느낄 수 있어야 함
시안 디자인 및 프로토타입 검증
1. 디자인 선호도 평가 : 프로토타입을 통해 확정 시안에 대한 평가를 수행하는 경우 디자인 선호도 평가를 수행해 볼 수 있다. 디자인 선호도 평가는 사용자의 감성을 알아보기 위해 과학적인 관점에서 객관적으로 해석하려는 목적을 가진다.
- 점수
- 순위
- 태도 기반 선호도
- 속성 기반 선호도
2. 성능 평가
- 단순성
- 일관성
- 가시성
- 효율성
- 심미성
UX 평가 모델
1) 유용성 : 사용자 필요에 따라 편리하게 이용 가능한지 여부
2) 사용성 : 인터페이스를 사용하기 쉽고 기능에 대한 학습이 용이한지 여부
3) 매력성 : 감성적 측면에서 즐거움 같은 시각적 경험을 제공하는지 여부
4) 검색성 : 사용자가 찾고자 하는 기능의 발견 여부에 관한 것
5) 접근성 : 사용자 환경, 신체적 기능 제한에 관계없이 누구나 사용 가능한지 여부
6) 신뢰성 : 제시하는 정보 콘텐츠에 대한 믿음, 에러여부, 안정성, 반응의 일치 여부
7) 가치성 : 경험을 통한 사용자의 만족과 서비스 효용 가치 여부
'전공' 카테고리의 다른 글
| 미디어 콘텐츠 일반 - 2 (0) | 2022.09.21 |
|---|---|
| 디자인 일반 (0) | 2022.04.22 |
| 뉴미디어 디자인 기본 (0) | 2022.04.21 |
| 미디어 콘텐츠 일반 (0) | 2022.04.20 |
