05. Account 계정 서비스 기획(3)
직관적 사용성이 예를 들면 어떤 것?
서비스 기획을 할 때
“사용성은 좀 더 직관적으로 해주세요”
라는 말을 많이 듣곤 하는데
직관적이란 말이 얼마나
말하는 사람에 따라 주관적인지 ~ ^^
일을 하다 보면 느끼게 된다
그래서 함께 일하는 scrum에서
stakeholder들과 사용성 테스트를 해가면서
이에 관하여 정리해갈 필요가 있다
사용성 설계는 UX기획자가 하는 일 아닌가? 싶지만
그런 직군이 마침 회사에 있다면
다행스럽고 수월하지만
그 사람이 회사에서 나였을 때?
필요한 것들을 이야기해보려 한다.
아니면 그래도 서비스 기획자인
Product Manager 제품 관리자
혹은 Product Owner 제품 책임자가 나였을 때
최종 의사 결정에 필요한 관점에 대해서
참고할만한 것들
회원가입 서비스 기획
회원가입할 때 아래와 같은 화면이 어디에든 있을 것이다.
- 아이디/ 비밀번호 입력할 때 무엇이 허용되는지 어떤 기준으로 작성이 가능한지 표시해주자
<그림 1>
- 그리고 조건에 맞지 않는 정보를 입력했을 때, 사용자가 가입하기 확인 버튼을 눌러서 문제가 있음을
뒤늦게 알게 되는 것보다 즉시 알 수 있게 해주는 것이 사용성에 좋다.
큰맘 먹고 회원가입을 해주는 고객님께
기껏 다 작성하고 맨 아래 [가입하기] 버튼을 눌렀더니..
"한글로 입력하시면 안 됩니다" 이러면 안 되니까~~
<그림 2>
위 그림같이 input을 입력하고
다음 입력값으로 이동했을 때
바로 문제가 있는 부분을 알려주는 것이 좋다
비밀번호 입력 기준이 틀렸을 때는
위 그림에서는 자물쇠 모양의 그림이
신호등 색상처럼 빨갛게 혹은 초록색으로 표시하면서
알 수 있게 해 주고
틀렸는지 text로 바로 안내한다.
<input> 태그나 <ion-input> 컴포넌트에
type 속성을 사용하여
'tel', 'text', 'date', 'email' 등을 넣어주면
해당 타입에 맞는 키보드가 나오게 된다.
예를 들어, tel의 경우는 숫자 키보드가 사용되고,
text는 일반 문자 키보드,
email은 @가 포함된 키보드가 나온다.
문제는 password 타입인데,
입력하는 비밀번호를 *로 보이게 하기 위해서 사용한다.
비밀번호에 영어가 들어가면 상관없지만,
숫자만 들어가도록 해야 하는 경우에는
사용성에 문제가 된다
예를 들어, 숫자 4자리만 쓰게 하고 싶을 때
password 타입을 사용하면
사용자가 비밀번호를 넣기 위해 input에 포커싱 했을 때
숫자 키보드가 나오길 예상하겠지만
실제로는 'text' 타입의 키보드가 나온다.
이때는 CSS를 사용해서 input에 ***표시 효과를 만들고
type="tel"로 지정해서
숫자 키보드를 올라오도록 하는 트릭을 쓴다
.mask-pw {
-webkit-text-security: disc;
-moz-webkit-text-security: disc;
-moz-text-security: disc;
}
이처럼 서비스 기획자는
html, css 등 마크업 개발자 혹은 포블리셔라고
불리는 직군의 사람들이 일하는 영역의 속성도
알아야 한다
접근성을 좋게 하는 디테일한 기술
회원가입을 할 때 입력하는 input에는
아래와 같은 디테일한 기획이 필요하다
훌륭한 개발자를 만났다면
그동안 알아서 되었을 수도 있지만
기획자인 우리가 한 번 더 생각하고 챙겨야 한다.
아이디를 입력할 때는 input박스에
모바일 환경에서 영문 키보드가 먼저 나오게 하자
이메일을 입력할 때는
@표시가 하단에 노출되게 하는 키보드로
숫자를 입력할 때는 쿼티형이 아닌
only 숫자만 크게 나오는 키보드로
장애인 차별 금지법에 따라
접근성은 어떤 사용자도 소외되지 않게 해야 한다.
시각장애인이 인터넷 또는 모바일을 사용할 때는
화면에 있는 오브젝트들과 사용 단계에 대해서
소리로 가이드를 준다
또 시각장애인뿐 아니라
다른 장애를 갖고 있는 사용자들도
원하는 선택을 할 수 있게 하는
아주 약간의 추가 속성 설계를 해야 한다
이것들이 원활하게 가능하려면
먼저 알아야 할 기본적인 몇 가지가 필요하다
우선은 모든 필요한 영역에 대체 text를 지정하는 것
화면상에 보이지 않는 부분이라서
개발 코딩할 때 생략하고 마는 일이 있는데
이미지라면 alt=‘이미지’라고 막 써서 나오면 안 되고
그 이미지가 어떤 그림인지 설명하는 값을
제대로 넣자
alt=‘비밀번호가 맞거나 틀렸을 때 색상을 표시하는 그림’
이렇게 입력되어 있어야
핸디캡이 있는 사용자가 직관적으로 쓸 수 있다
그다음은 화면에 구성된 요소의 이동 순서도 필요한데
마우스나 터치를 직접 할 수 없이
pc환경에서 컴퓨터 오류로
키보드만 써서 화면을 선택해야 할 때
tab키로 이동해본 경험이 있는 사람이라면
이해하기 쉬울 것 같은데
화면을 개발하는 코딩의 돔 구조와
그 안의 오브젝트 구성의 순서가 좌우하는 영역이다
아이디를 입력하고 다음을 눌렀는데
패스워드 입력이 아니라 갑자기 점프해서
자물쇠 모양의 비밀번호 유효 표시 그림이 나온다거나
이런 순서가 엉키는 것이 발생할 수 있다.
그 밖에 자세한 것은 "웹접근성" 이라는 내용이 방대하므로
자료를 하나 투척 하는 것으로
모바일 웹 접근성 검사항목https://www.slideshare.net/jaesungchoi52012/pcmobile
