UI/UX(사용자 친화 웹)
UI : 사람들이 컴퓨터와 상호 작용하는 시스템 (User Interface)
UX : 사용자가 어떤 제품, 서비스 등을 직간접적으로 이용하며 느끼는 경험 (User Experience)
🏁 그리드 시스템
Margin: 화면 양쪽 여백Column: 세로로 나누어진 영역 (휴대폰 4개~ 480, 태블릿 8개~ 768, pc 12개1280 ~)Gutter: column 사이의 공간, 콘텐츠 구분에 도움
🏁 좋은 UX를 만드는 요소
피터 모빌의 벌집 모형
-
유용성(Useful): 사용 가능한가?
⇒ 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소 -
사용성(Usable): 사용하기 쉬운가?
⇒ 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가 -
매력성(Desirable): 매력적인가?
⇒ 제품이 사용자들에게 매력적인가에 대한 요소
⇒ 이미지, 브랜딩 등의 여러 요소들이 사용자에게 긍정적인 감정을 불러오는지 -
신뢰성(Credible): 신뢰할 수 있는가?
⇒ 사용자가 제품이나 서비스를 믿고 사용할 수 있는가 -
접근성(Accessible): 접근하기 쉬운가?
⇒ 나이, 성별, 장애 여부를 떠나서 누구든지 제품이나 서비스에 접근할 수 있는가 -
검색 가능성(Findable): 찾기 쉬운가?
⇒ 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가 -
가치성(Valuable): 가치를 제공하는가?
⇒ 위에서 언급된 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가
🏁 User Flow
사용자 흐름은 사용자가 제품에 진입한 시점을 시작으로
사용자가 취할 수 있는 모든 액션을 뜻하며, 다이어그램을 그려서 정리한다.
➰ 다이어그램 작성법
- 직사각형(화면) : 사용자가 보게 될 화면 (회원 가입 페이지, 로그인 페이지 등)
- 다이아몬드(행동) : 사용자가 취하게 될 행동 (로그인, 버튼 클릭, 업로드 등)
- 화살표 : 직사각형(화면) 과 다이아몬드(행동)을 연결시켜주는 화살표
🧐 다이어그램 그리면 좋은 이유는?
사용자 흐름 상 매끄럽지 않은 부분을 발견해 수정할 수 있고,
없어도 상관 없는 기능을 발견해 삭제하거나
있어야 할 기능을 발견해 추가할 수 있다.
🏁 제이콥 닐슨의 10가지 사용성 평가 기준 (Jakob’s Ten Usability Heuristics)
Heuristics 는 '체험적인' 이라는 뜻으로 완벽한 지식 대신 직관과 경험을 활용하는 방법론을 말한다.
1️⃣ 시스템 상태의 가시성 (Visibility of system status)
합리적인 시간 내 적절한 피드백을 통해 사용자에게 진행상황에 대한 정보를 제공해야 한다.
⇒ 파일 첨부를 위한 업로딩 상황을 실시간으로 보여주기
2️⃣ 시스템과 현실 세계의 일치 (Match between system and the real world)
전문용어가 아닌 사용자에게 친숙한 단어 및 개념을 사용해야 한다.
3️⃣ 사용자 제어 및 자유 (User control and freedom)
현재 진행 중인 작업에서 벗어나거나 취소할 수 있는 탈출구를 명확하게 제공해야 한다.
⇒ 실수로 삭제를 누른 경우 삭제 직후에 취소할 수 있는 버튼
4️⃣ 일관성 및 표준 (Consistency and standards)
- 외부 일관성 : 일관적인 사용자 경험을 제공하기 위해 플랫폼 및 업계의 관습을 따르기
⇒ 실수로 삭제를 누른 경우 삭제 직후에 취소할 수 있는 버튼- 내부 일관성 : 사용자가 혼란스럽지 않게 제품의 인터페이스나 정보 제공에 일관성 주기
⇒ 한 프로젝트 내에서 같은 인터페이스를 유지(버튼 모양, 위치, 아이콘 사이즈 등)
5️⃣ 오류 방지 (Error prevention)
오류가 발생하기 쉬운 상황을 제거하여 유저의 실수를 방지
⇒ 삭제 버튼 클릭 시 정말 삭제할지 유저의 의사 확인 차 한번 더 물어보기
6️⃣ 기억보다는 직관 (Recognition rather than recall)
사용자가 기억해야 할 정보 줄이기
⇒ 최근 검색 했던 단어 목록 보여주기
7️⃣ 사용의 유연성과 효율성 (Flexibility and efficiency of use)
초보자와 전문가 모두에게 개별 맞춤 기능을 제공
⇒ 프로그램의 단축키를 직접 설정하여 사용하게
8️⃣ 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)
인터페이스에 관련 없거나 불필요한 정보가 포함되지 않게 하고, 콘텐츠와 기능의 우선순위를 정해 제공하기
⇒ 사용 빈도가 낮은 메뉴들까지 다 보여주지 않고 필요할 때만 볼 수 있게 하기
9️⃣ 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)
유저가 이해할 수 있는 언어를 사용해 문제가 무엇인지 정확하게 표현하고 해결 방법 제안하기
⇒ 영문 이름을 입력해야 하는 폼에 영어를 입력해야 함을 정확하게 알려주기
🔟 도움말 및 설명 문서 (Help and documentation)
추가 설명 핑요 없는게 제일 좋지만, 상황에 따라 이해하는데 도움이 되는 문서 제공하기
⇒ ? 툴팁이라거나 검색에 도움을 주기
