1. 인터랙티브 미디어디자인
Chapter # : 66
내비게이션 요소에 타당한 탭 순서를 부여하라
시력에 제약이 있거나 움직이는 데 불편한 사용자들이 이용하는 방식이기 때문에 탭 순서는 충분한 생각을 거쳐 명확하게 정리하는
것이 중요하다.
예시), Google사례
Tab 키를 눌렀을 때 선택
순서가 위에서 아래로
흘러가며 사용하면서
클릭할 수 있는 모든
것들을 지나간다. 순서는
위에있는 Gmail,
이미지검색, Google App,
Google 계정을 지나간 뒤에
검색 부분(심지어 검색
기록과 그 검색기록을
삭제할지 말지까지 뜬다.),
마지막으로 화면에서
바로가기 추가해놓은
링크와 그 링크의
추가작업이다.
예시), Naver사례
Naver 역시 위에서부터
아래로 흐르고
Google과의
차이점이라면 네이버는
검색이 1순위, 그 다음에
왼쪽 상단에 선택할
것이 검은색 바탕으로
뜬다. 특이한 점은 그
다음에 맨 위부터 다시
하는 것이 아니라
Naver홈버튼(큰
로고있는 부분)을
지나간 다음에 맨 위에
있는 '네이버를
시작페이지로','주니어
네이버' 로 간다.
2. 인터랙티브 미디어디자인
Chapter # : 67
컨트롤에 명확한 레이블을 적어라
워터마크로 필드를 채워 놓으면 나중에 사용자가 입력을 하다가 까먹을 수도 있어 명확한 레이블을 같이 적어두는 것이 좋다.
예시), Twitter app사례
Twitter를 app에서
보면 회원가입 화면이
이렇게 뜬다. 입력하는
창에 바로 워터마크를
넣은데다가 입력하려고
터치를 해보면
워터마크가
사라져 사용자가 뭘
입력하는지 중간에
까먹을 수도 있을 것
같다.
예시), Twitter web사례
Twitter의 web은 app과
조금 달랐는데 그냥 일반
창에서만 보면
워터마크가 입력하는
창을 가득 채웠지만
입력을 하려고 클릭을
했을 때 워터마크가
작아지고 색깔도 파래져
사용자가 입력하는 창
위에 올라갔다. App과
달리 훨씬 정보를
입력하는데 있어
명확하다.
3. 인터랙티브 미디어디자인
Chapter # : 68
사용자가 특정 알림을 끌 수 있게 하라
많은 알림을 사용자에게 울리도록 했을 때 소음 수준에 불만을 느끼고 사용자마다 중요하다고 생각하는 알람이 다르기 때문에
알림에 대한 상세한 컨트롤을 할 수 있도록 제공하는 것이 좋다.
예시), Discord pc
app사례
Discord의 pc app중에서
알림쪽으로 가보면 전체
알림 뿐만 아니라 소리
알림, 이메일 알림 등을
자세하게
나눠놓아서 사용자가 끄
거나 키고싶은 알림을
설정할 수 있도록 했다.
예시), Twitter app사례
Twitter의 알람설정에
가보면 나와 관련된
알람과 그 외의
트위터에서의 알람으로
크게 나누어놨고, 그에
대한 세부사항을 나눠나
내가 원하는 알람만
오게 하도록 설정할 수
있도록 했다.
4. 인터랙티브 미디어디자인
Chapter # : 69
탭 가능 영역을 손가락 크기로 만들어라
터치스크린 컨트롤을 개발중이라면 터치 면적을 작게 하지 말고 요소들이 서로 근접하게 배치하지 말고 적당한 여백을 추가하는
것이 좋다.
예시), 배달의
민족 app사례
배달의 민족의 메인 홈
화면 입니다. 터치를 할
수 있는 부분이
큼직큼직하고 그
사이사이에 공백을 주어
어디까지 터치할 수
있는지 명확하게 했다.
예시), 배달의
민족 app사례
같은 배달의 민족
안에서 배달-
메뉴화면인데 앞의
메인화면과는 달리
아이콘들이 빼곡히 있다.
그리고 실제로 터치를
해본 결과 터치를 했을
때 공백이 느껴지는
부분은 없었고 실수로
잘누를 경우도 생길 수
있을 것이다.
