요즘 취업 시장에선 개발자에게 UI/UX에 대한 이해도를 묻는다고 한다.
그쪽은 디자이너의 영역아닌가? 싶지만 UI/UX에 대한 이해가 있다면 현업에서 디자이너와의 원활한 소통과, 디자이너의 의도 파악하고 기술적 제약사항을 전달하며 타협점을 찾을 수 있을 것 이다.
UI/UX에 대한 이해가 높아지면 사용자 경험에 어떤 영향을 미칠지를 더욱 고민해보며 기술적인 결정도 균형 잡힌 접근 방식으로 취할 수 있다고 보기 때문에 이번엔 UI/UX에 대해 좀 정리 해보려고 한다.
UI/UX 란?
UI/UX는 사용자가 디지털 제품이나 서비스를 경험하는 방식에 직접적으로 영향을 미친다.
UI는 앱의 모든 시각적 요소들을 말한다.
사용자가 볼 수 있고 만질 수 있는 모든 것이라고 보면 되는대, UI디자인의 주요 목표는 사용자가 제품을 효율적이고 쉽게 사용할 수 있도록 하는 것이다.
그저 이쁘게만 보이는게 다가 아닌, 직관적으로 이해하기 쉽게 표현하는 것이 중요하다.
UX는 사용자의 경험에 대한 것이다.
사용자가 제품을 사용하는 과정에서 경험하는 전반적인 경험, 느낌등을 의미하며, 사용자의 요구를 충족시키는 제품을 만드는 것을 목표로한다.
그렇기 때문에 사용자에 대한 조사, 프로토 타이핑, 사용성 테스트 등을 통해 이루어진다.
단순히 제품이 어떻게 보이는지가 아니라, 제품을 사용할때 느끼는 편리함, 효율성, 만족도 등에 중점을 둔다.
좋은 UX디자인은 사용자가 제품을 계속 사용하고자 하는 긍정적인 경험을 제공 하는걸 의미한다고 한다.
결론 적으로 UI는 사용자가 제품을 쉽게 이해하게 도와주며, 사용자의 경험 즉 UX를 향상시킨다고보면된다.
UX같은 경우는 반대로 UI를 어떻게 구성해야 할지 방향성을 제시한다.
UX리서치 방법론
그렇다면 훌륭한 UX를 구성하기 위해선 어떻게 해야할까?
위에서 말했다 싶이 UX는 사용자의 경험에 의한것인데, 이 사용자 경험을 어떻게 생각할까?
사용자 경험을 생각하기 위해서 제시되는 리서치 방법론이있다.
유저 퍼소나
어제 정리한 유저 퍼소나가 그중 한 방법인데,
사용자 그룹을 대표하는 가상의 프로필을 만드는 방법이다.
물론 가상의 프로필이지만 실제 데이터를 기반으로 해야하며, 한명을 설정하면 한명이 원하는바가 좀더 구체적으로 정리가 되고 한명의 확실한 유저를 확보 할수 있고, 한명이 만족하는 제품은 다른 사람도 만족할 확률이 높기 때문에 한명에 집중해서 회의할 수 있다.
A/B Testing
동일한 디자인을 2개 이상의 버전을 만들어서 어떤 것이 더 나은지를 평가한다.
주로 (전자 상거래, 전자 메일 뉴스레터, 구독 등) 단기 추적 전환에 사용된다.
이외에도 사용자 관찰이나 인터뷰, 설문조사, 사용성 테스트 등등 다양한 리서치 방법론이 있다.
안드로이드에서의 UI/UX
모바일 환경에서 고려해야할 UI/UX들이 있다.
디자인 가이드나 그 동안 쌓인 사용자들의 경험등이 있기때문에 주의해야할점이 있다.
https://m2.material.io/ 구글 마테리얼 디자인 가이드에서 이러한 사항들을 적어두는데 알아 둘 필요가 있다.
1. Alert 다이얼로그 상단 우측 x버튼을 사용하지않는다
모바일에서 창 닫기 버튼은 하단이 사용성이 좋다.
2. 풀프레임 대화창 Dialog에 닫기버튼은 왼쪽상단
풀프레임 다이얼로그는 사용자가 특정 정보의 입력을 요청할 경우 사용됨.
모바일OS는 모두 툴바 왼쪽에 햄버거 버튼이나 뒤로 가기 버튼같은 내비게이션 컨트롤이 위치해 있다.
우측에는 확인이나 기타 부가적인 컨트롤을 위치 시키는게 기본이기에, 인터페이스 일관성 측면에서 내비게이션 관련 컨트롤은 동일 위치에 두는걸 권장한다.
3.긍정적인 액션 버튼은 우측에 배치
다이얼로그에서 긍정적인 액션은 화면 우측에 배치해야한다.
확인 | 취소 가 아닌 취소 | 확인 이 되야한다.
구글의 가이드 라인에서 대체적으로 부정적인 행동은 왼쪽에 있는 반면 긍정적 행동은 오른쪽에 있다고 말한다.
4.입력을 완료하지 않은 상태에서 완료 버튼은 오류를 방지하기 위해 비 활성화를 권장
사용자 오류가능성 최소화, 사용자의 실수를 막고, 오류를 방지하기 위해 제약을 건다.
오류 메시지는 사용자의 경험을 헤치는 주범
5.입력 내용에 맞는 키보드를 제공
숫자 입력란에 문자입력 키보드를 제공하는것을 지양 해야한다.
상황에 맞는 키보드를 일관되게 제공해야 함.
검색필드에서는 일반 키보드가 아닌 검색 버튼이 있는 검색용 키보드를 제공 해야한다.
이메일 입력 필드에는 일반 텍스트 키보드가 아니라 '@'가 있는 키보드를 제공해야함
6.검색 필드 우측에 검색 버튼은 비추
검색어 입력 후 키보드의 검색 버튼을 탭하는 것이 사용성이 더 높다.
7.스크롤을 고려하여 콘텐츠의 그리드를 화면 하단에 정확하게 정렬하지 않기
사용자는 생각보다 스크롤을 많이 하지 않는다. 특정한 요인이 없는 이상 스크롤 하지 않고 검색 같은 내비게이션 아이콘을 사용한다.
스크롤하면 더 많은 콘텐츠가 있음을 예상할 수 있는 시각적인 단서를 제공해야함
8.탭은 중첩되지 않아야한다.
탭은 동일한 계층에 있는 관련 콘텐츠를 분류하고 탐색을 돕는 내비게이션 컨트롤인대
한 줄 이상으로 디자인 하면 복잡해져 개별 탭을 인식하기 어렵다.
한줄에 다 들어가지 않는다면 디자인을 간소화하거나 그룹을 조정해야함
항목을 줄이거나(최대 5개), 좌우 스크롤 권장
9.버튼 스타일은 중요도에 맞게
한 화면에서 다른 기능을 가진 버튼을 동일하게 디자인 하면 안된다.
버튼의 크기와 대비로 기능의 위계도 디자인가능하다. 사용자가 가장 많이 사용하는 버튼의 크기를 가장 크게 만든다.
10.시각적 노이즈는 최소화
사용자가 콘텐츠에 집중할 수 있도록 해야한다.
작은 화면의 모바일을 디자인할 때 모든 시각적인 요소는 목적과 의미를 가지고 있어야 한다.
목적이 없는 디자인 요소는 화면을 산만하게 할 수 있다.
사용자가 목표로 하는 작업 수행을 지원하고 콘텐츠에 집중하는데 도움이 되지 않는 시각적인 요소를 최소화해야 한다.
색상의 수를 제한하고 사용자의 행동을 유도하는 요소 외에는 색상을 적용해선 않된다.
작은 화면 안에 기능과 콘텐츠를 촘촘하게 채우기 보다는 충분한 여백을 주자.
콘텐츠가 많다면 계층 구조를 명확히 하고 연관 정보는 그루핑을 통해서 화면의 복잡함을 줄여야한다.
콘텐츠 내 보더라인은 최소화 해야한다. 산만함
격자형 보더라인은 가급적 사용하지 말것
11.선택이나 활성화 등 콤포넌트의 상태를 색상만 표현지 않아야 한다.
색과 명도 대비만으로 표현하면 저시력자나 색구분이 어려운 사용자는 인지하기 어렵다. 콤포넌트의 상태는 테두리, 또는 구분선등의 형태적 차이를 같이 활용하여 표현해야함.
12.키보드를 통해 많은 정보를 입력해야 하는 대화창에서 완료를 의미하는 버튼은 상단 내비게이션 바 우측을 권장함.
키보드를 고려해야함, 키보드를 닫지 않고도 완료할 수 있어야한다.
https://brunch.co.kr/@chulhochoiucj0/8
참고해서 썻는데, 거의 그냥 따라 쓴 느낌이지만 그 만큼 핵심정리가 잘 돼 있었다.
원본에선 스크린샷과 함께 설명이 되어 있어 더욱 이해가 잘 된듯 하다.
술술 읽히고 공감도 잘 되서 그런가 재밋었다.
