[UX] 가벼운 이야기2011.05.25 18:01



최근, 미투데이의 miriya 님이 올려주신 UX movement 링크를 보게 되었습니다.
http://uxmovement.com/forms/innovative-techniques-to-simplify-sign-ups-and-logins 



웹사이트의 회원가입과 로그인을 어떻게 하면 쉽게 할 수 있을지에 대한 몇가지 테크닉에 관한 글입니다.
그 중에도 인상깊었던 부분은 '웹사이트 로그인을 할때 어떤 정보를 통해서 로그인을 하게 할 것인가?' 였습니다.

로그인 방식은 다음과 같이 몇가지 유형이 있습니다.

1. ID + Password 로 로그인 하는 방법
국내 웹사이트에서는 거의 이 방식을 사용하고 있습니다.
이 경우에는 사용자가 ID를 기억해야 한다는 부담감이 있습니다. 
ID 입력 방식도 사이트에 따라 천차만별이기 때문에 한 사람이 여러개의 ID를 가질 수 있습니다.(첫 글자가 숫자면 안된다는 규칙, 6자리에서 12자리 사이로 입력해야 한다는 규칙같은것들 때문이죠.) 저의 경우 4~5개의 ID와 마찬가지로 4~5 개의 Password가 있어서 상황에 따라 조합해서 가입하는 경우가 있습니다. 
또한 회원 가입시에는 별도로 E-mail 정보를 입력해야 한다는 부담이 있습니다.(E-mail 정보를 ID, Password 확인 용도나, 이벤트 알림 용도로 사용할 수 있죠.) 

미투데이의 로그인 방식


2. E-mail + Password 로 로그인 하는 방법
외국 웹사이트에서는 거의 이 방식을 사용하고 있습니다.
이 경우에도 마찬가지로 사용자가 E-mail을 기억해야 한다는 부담감이 있습니다. 
또한 상대적으로 ID보다는 긴 형태이기 때문에 입력하는데 시간이 걸리며, 인지하는데도 어느정도의 어려움이 있습니다. E-mail을 몇 개나 사용하고 있는지도 마찬가지로 천차만별입니다. 저의 경우를 비추어보자면 E-mail을 4~5개 정도 보유하고 있어서 이 경우에도 어떤 E-mail로 가입했는지 고민을 해야 합니다. 그렇지만 E-mail을 한 개만 사용하는 경우에는 크게 문제는 없을것 같습니다.  

또한 웹사이트에서는 E-mal 입력이 편한 반면, 모바일에서는 E-mail 주소 입력이 상대적으로 불편합니다. 이런 여러가지 생각들속에서 올바른 가치판단을 해야겠습니다.

페이스북의 로그인 방식



그렇다면 회원 가입 시 E-mail 인증 및 E-mail 중복 체크를 해야될까요?
E-mail 중복 체크는 꼭 해야 할것으로 보입니다. 하나의 E-mail로 두 명이 사용할 수는 없기 때문입니다. E-mail 인증 절차도 복잡하지않게 설계한다는 전제하에서 필요할 것으로 보입니다. '인증을 해서 사용자를 불편하게 할 것인가?' vs '인증을 하지 않아 입력단계를 편하게 하지만, 이메일을 잘못 입력했을 경우에는 사용자의 책임으로 전가할 것인가?' 를 사이에 두고 가치판단을 하여야겠습니다.

3. E-mail or ID + Password 로 로그인 하는 방법
E-mail 혹은 ID 둘 중 하나만 입력해도 로그인 하는 방법입니다. 이 경우 E-mail 과 ID 둘다 입력되어있다는 전제하에서 로그인이 성립 될 것 같습니다. E-mail 통해 가입하는걸 원하는 사람 혹은 ID를 통해 가입하는걸 원하는 사람이 있을 수 있으므로 둘 다 지원하자는건데, 개인적으로는 부가적인 방법으로 상황에 따라 적용하는 것이 좋다고 생각합니다.

4. 아예 회원가입을 하지 않고 로그인 하는 방법
회원 가입대신 Facebook이나 Twitter 로그인으로 대신 하는 방법이 있습니다. 원래는 이 방법이 보안을 위해 특정 어플리케이션에서 직접 ID, Password를 입력받지 않고 사용자의 정보에 접근하기 위한 표준이었습니다. 그러나 요즘에는 개인정보가 많이 필요하지 않은 경우 페이스북, 트위터 OAuth로 사용자 인증을 하는 서비스가 많아졌습니다. 

그 전에는 통합아이디 개념의 Open ID 가 하나의 방법이었는데, 요즘에는 이 방식이 점점 줄어들고 있는 것 같습니다. 미투데이에서도 Open ID를 지원하다가, 최근 어떤 이유로 인해 Open ID를 지원하지 않고 있습니다.

5. 전화번호로 로그인(인증)하는 방법
이 경우는 웹사이트보다는 모바일에서 적합한 방식으로 보입니다. '카카오톡'에서 이 방식을 사용하고 있지요. 이 방식은 회원가입 없이도 로그인을 할 수 있다는 장점이 있습니다. 하지만 전화번호가 바뀌거나 없어질 경우에는 이 방식이 문제가 됩니다. 카카오톡의 경우 문자를 주고받는 커뮤니케이션 앱이기 때문에 전화번호가 바뀌어도 크게 이상하지는 않습니다. 하지만 다른 종류의 앱들이 전화번호로 로그인을 할경우에는 다시 친구를 맺어야 하는 문제가 생길 수 있습니다. 
또한 어떠한 연유로 두 개의 전화번호를 가지고 있는 사용자의 경우를 고려할 필요가 있습니다. 카카오톡은 한번에 한 개의 전화번호를 인증하기 때문에 두 개의 전화번호를 인식할 수 있는 방법이 없습니다.

또한 카카오톡은 전화번호 정보밖에 가져오지 않기 때문에, 다른 서비스(이를 테면 웹)에 접목시키기가 매우 어려운 실정입니다. 추가적으로 ID를 입력하게 하는것도 이 때문으로 보여집니다. 

카카오톡의 로그인(인증) 방



웹사이트 로그인, 어떤 방식으로 하는 것이 좋을까요?
저는 요즘 'E-mail + Password' 방식이 좋은 것 같다는 생각이 듭니다. 여러분들의 생각은 어떠세요?


PS. Log in vs Sign in 어떤 용어를 쓰는것이 좋을까요? 
http://legendre.tistory.com/entry/Log-in%EA%B3%BC-Sign-in




* 본 블로깅은 PXD 사내메일의 글을 일부 포함하고 있습니다. 
(글 쓰는데 많은 도움주신 이재용님, 無異님 감사합니다.)
* 좋은 자료 링크해주신 miriya님 감사합니다. 

Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 독후감2010.03.30 09:00



UI 기획을 할때 레이블링하는것 만큼이나 어려운 일은 없더군요. 책을 찾아보다가 Designing web navigation 에서 좋은 네비게이션 레이블의 조건에 대해서 기술하고 있는 것을 발견했습니다. 그중 '네비게이션 레이블링 챕터' 를 정리해 보았습니다. 네비게이션용 레이블링 뿐 아니라, 용어 레이블링 할때도 적용할 수 있을 수 있을 것 같습니다. 또한 웹사이트 기획 뿐 아니라 다른 디지털 디바이스들에도 적용할 수 있을 것 같습니다.



A. 사용자 언어로 말하기
1. 회사 전문 용어를 쓰지 않는다.
회사 전문 용어는 너무 쉽게 웹사이트에 들어가 있습니다. 이러한 전문용어는 사용자에게 도움이 되기보다는 혼란스럽게 합니다. 

2. 기술 용어를 쓰지 않는다.
대부분 방문자들은 사이트를 만든 사람만큼 웹 사이트에 대해 잘 알지 못합니다. 플러그인이 무엇인지. 보안 서버가 무엇을 의미하는지 사용자들은 궁금할까요? 사이트 타겟 방문자들의 객관적 지식수준을 고려한 용어를 사용하여야 겠습니다.

3. 너무 똑똑하거나 재미있는 용어를 쓰지 않는다.
일반적으로 너무 똑똑하고 영리하게 쓰인 레이블은 의도적으로 동작하지 않습니다. 사이트를 디자인하는 동안 재치 있는 단어들을 만드는 일은 재미있을지 몰라도, 나중에 사람들이 이러한 단어를 보고 네비게이션하려고 애써야 하는 상황은 전혀 재미있지 않습니다.

4. 약자를 쓰지 않는다.
약자는 공간을 절약하지만 사람들이 올바른 단어를 빠르게 훑어보는 것을 방해하기도 합니다. 심지어 어떤 방문자들은 특정 약자는 전혀 이해하지 못합니다. 모든 사람들이 FAQ, PDF, RSS의 의미를 알고 있는 것이 아닙니다.

5. 적절한 보이스톤을 사용한다.
일반적으로 은행 사이트의 라벨은 10대 음악 사이트와는 다른 톤으로 쓰입니다. 전자는 공식적이고 사무적이며, 후자는 젊고 모던하지요. 특정 타겟 청중들이 기대하는 적절한 레이블의 톤을 이해하는 것이 중요합니다.


B. 설명적인 레이블
레이블을 될 수 있는 한 설명적으로 만들고자 노력해야 합니다.
레이블이 나타내는 콘텐츠에 대한 실마리를 제공해야 합니다.
넓고 모호한 레이블을 써야 한다면, 어떤 방법으로든 뜻을 한정하고자 노력해야 합니다.


C. 상호 배타적인 레이블
레이블은 메뉴에서 그룹으로 나타나는 경우가 많습니다. 한 레이블의 의미는 연속해 있는 다른 레이블의 해석에 영향을 줄 수 있기 때문에, 가능한한 레이블을 구분해야 합니다.


D. 명확한 초점을 나타내는 레이블
초점이 맞추어진 레이블은 보다 예측하기 쉬우며 네비게이션을 하는 동안 사용자들의 자신감을 증가시킵니다. (예를 들어 고양이, 강아지, 햄스터에 대한 카테고리를 동물이 아닌 애완동물이라고 씁니다. 반면에 고양이과  & 개과 는 너무 상세해서 햄스터가 들어갈 수 없습니다.)


E. 일관된 레이블
일관된 레이블은 모호성을 없앨 수 있습니다.

1. 정밀도
정밀도는 상세 내용이나 주제의 상대적인 폭을 의미합니다. 사이트 구조에서 동일한 레벨에 있는 네비게이션 옵션들은 동일한 콘텐츠의 폭이 담겨있습니다.

2. 구문론
네비게이션의 레이블은 모두가 비슷한 문법적 구조로 되어 있어야 합니다. 언어의 동일한 부분을 사용하도록 노력해야 합니다.

3. 표현
서체나 크기, 스타일등을 일관성있게 사용하여 통일감을 주는 것이 중요합니다.

4. 사용
여러 곳에서 동일한 옵션을 지칭할 때 동일한 레이블을 사용합니다. 이러한 일관성은 인쇄와 같은 다른 미디어 채널에도 마찬가지로 적용되어야 합니다.


F. 레이블의 길이
레이블이 길면 사람들이 찾고 있는 계기가 되는 단서가 포함되고 있을 가능성이 높습니다. 하지만 레이블의 길이는 제한을 두어야 합니다. 스풀은 13단어 이상의 링크는 성능이 형편없으며, 사람들이 한 번에 이해할 수 있는 양이 정해져 있다고 하였습니다. 궁극적으로 레이블에 몇개의 단어가 필요한가에 대해서는 엄격하게 정해진 규칙이 없습니다. 하지만 화면 영역을 더 많이 사용해서라도 명확하고 구체적으로 표현하는 편이 낫습니다. 명확하게 표현하기 위한 한 가지 테크닉은 짧은 레이블을 사용하되 옆에 설명문을 붙이는 방법이 있습니다.




Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. 댓글을 남겨주세요. ^^

    2010.05.21 09:52 신고 [ ADDR : EDIT/ DEL : REPLY ]

[UX] 가벼운 이야기2010.03.15 08:00

크롬플러스를 사용하다 보니, 우연히 마우스 제스쳐(mouse gesture) 기능이 있다는 사실을 알았습니다. 크롬플러스는 마우스 제스쳐 기능을 기본으로 제공하고 있더군요. 크롬플러스의 마우스 제스쳐 기능을 보다보니 문득 다른 브라우저(혹은 툴바)의 마우스 제스쳐는 어떻게 제공하고 있는지 궁금해지더군요. 그래서 크롬플러스, 네이버툴바, 파이어폭스(fire gesture)의 마우스 제스쳐를 조사해 보았습니다.

[그림 1] 크롬플러스 마우스 제스쳐 설정

[그림2] 네이버 툴바 마우스 제스쳐 설정

[그림3] 파이어폭스 Fire Gesture 설정

크롬플러스에서 마우스 제스쳐 기능은 기본으로 제공하는 기능이기 때문에 별 무리없이 사용할 수 있습니다. 그러나 네이버 툴바의 마우스 제스쳐 기능은 네이버 툴바를 깔아야하는 제약사항이 있습니다.(인터넷 익스플로어와 파이어폭스에서 설치가능) 파이어폭스는 Gesture를 제공하는 여러가지 플러그인이 있으며, 그중 Fire Gesture를 선택적으로 깔아보았습니다. 결국 크롬플러스를 제외한 다른 브라우저및 툴바는 이중으로 설치해야 한다는 부담감이 있습니다. (네이버 툴바의 경우 툴바를 설치하는 것 만으로도 부담으로 작용하겠지요.)  

[표4] 크롬플러스, 네이버툴바, 파이어폭스(Fire Gesture)의 마우스 제스쳐 비교 차트
클릭하시면 더 큰 화면으로 보실 수 있습니다.

크롬플러스, 네이버툴바, 파이어폭스(Fire Gesture)의 마우스 제스쳐 비교 차트는 [표4] 와 같습니다. 
사용하고 있는 마우스 제스쳐의 유형을 뽑아보면,

1. 상,하,좌,우 한 방향으로 이동 (ex. up) 

2. 상,하,좌,우 한 방향으로 이동 후 다른방향으로 이동 (ex.up-left)

3. 상,하,좌,우 한 방향으로 이동 후 다시 돌아옴 (ex. up-down)

4. 상,하,좌,우 한 방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 (ex. down-right-up)

5. 상,하,좌,우 한 방향으로 이동후 다시 돌아온 후 다시 반대로 이동 (ex, down-up-down)

6. 상,하,좌,우 한 방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 - 계단을 그리는 형태로 단순화 할 수 있습니다. (ex. right-down-right-down)

7. 상,하,좌,우 한 방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 후 다른방향으로 이동 - 사각형을 그리는 제스쳐로 단순화 할 수 있습니다. (ex. left-down-right-up-left)

8. 다른 키와 접목하여 이동 (ex. wheel+up, ctrl+마우스동작)

와 같은 방식으로 나누어 볼 수 있습니다. 9. 그 외에도 대각선 방향으로 움직이는 유형, 10. 모양을 그리는 유형(삼각형, 사각형, 동그라미), 11. 철자를 그리는 유형 (via MIRiyA☆) 이 있을 수 있습니다.

크롬플러스, 네이버 툴바, 파이어폭스(Fire Gesture)의 마우스 제스쳐 기능을 더 자세히 살펴보자면,

up, down의 경우 현재 페이지의 맨위, 맨 아래로 스크롤 하는 기능으로 주로 사용하고 있습니다. 파이어폭스(Fire Gesture)의 경우 새탭에 링크열기 기능으로 쓰고 있습니다. left, right의 경우는 모든 경우가 이전페이지, 다음페이지 이동으로 사용하고 있습니다. 네이버툴바의 경우 up, down의 길이에 따라서 up,down을 길게 수행할 경우 페이지의 맨위, 맨 아래로 스크롤하게 하였으며, up,down 을 짧게 수행할 경우 현재 페이지의 위, 아래로 조금씩 스크롤하게 되어있습니다.

up-left, up-right 의 경우 크롬플러스와 파이어폭스(Fire Gesture)는 이전 탭, 다음 탭으로 이동하게 되어있으나 네이버툴바의 경우 빈 페이지, 빈 탭으로 새창열기로 제공하고 있습니다.

down-left 의 경우 크롬플러스는 풀스크린보기 (f11과 같은기능) 로 사용하고 있으며, 네이버툴바는 새로고침 (f5와 같은기능), 파이어폭스는 다른이름으로 저장의 각기 다른기능으로 제공하고 있습니다. down-right 의 경우 크롬플러스, 네이버툴바, 파이어폭스(Fire Gesture) 모두 현재 탭 닫기로 제공하고 있습니다.

left-up, left-down의 경우 크롬플러스는 줌인, 줌아웃으로 사용하고 있으며, 파이어폭스(Fire Gesture)는 상단으로 스크롤, 하단으로 스크롤로 제공하고 있습니다.

right-up, right-down의 경우 크롬플러스는 새탭, new IE 탭을 여는데 사용하고 있으며, 파이어폭스(Fire Gesture)는 선택한 문장내 모든연결 열기, 선택한 문장을 다음으로 검색으로 사용하고 있습니다.

파이어폭스(Fire Gesture)는 마우스 제스쳐로 거의 모든 기능을 수행할 수 있도록 하고있습니다. 대신 이 모든 제스쳐를 외워서 사용하기 위해서는 많은 시간이 필요하겠지요. (마우스 제스쳐가 거의 게임에서 필살기쓰는 수준입니다.) 또한 이 스크롤 규칙들은 Default 값이며, 사용자가 자신이 원하는대로 스크롤 규칙들을 바꿀 수 있습니다.

그 외의 기능으로, 네이버툴바와, 파이어폭스(Fire Gesture)는 마우스 제스쳐 시에 선의 색상과 굵기를 조정할 수 있게 되어있습니다.


글을 마치며

1. 웹사이트 마우스 제스쳐의 현실적인 방식의 통일화가 필요합니다. 하나의 제스쳐를 잘 사용하고 다른 환경에 처하게 되면 새로 제스쳐를 익혀야 한다는 부담감으로 작용하겠지요. 이 논의를 하기전에 웹사이트에서 마우스 제스쳐가  과연 필요한가? 혹은 쓰기편한가? 에 대한 논의가 이루어져야 할 것 같습니다. 적어도 제가 마우스 제스쳐를 경험해 본 결과 다소 학습이 필요하다는 단점이 있으나, 단순한 제스쳐의 경우 단축키보다는 쓰기 편하더군요. 결국 마우스 제스쳐는 단축키를 익히기에 버거운 유저에게 쉽게 다가갈 수 있을듯 합니다. 하지만 그러기에는 설치의 장벽, 사용법을 익히기 위한 장벽들을 넘어야 하겠습니다.

[그림5] SKY Phone의 제스쳐 인식 기능

2. 웹사이트뿐 아니라 모바일웹에도 제스쳐 기능이 도입되면 어떨까요? 모바일은 터치 기술의 도입으로 다양한 제스쳐가 가능해졌습니다. 스카이의 터치폰의 경우 제스쳐인식 기술을 통해 음악재생관련 기능을 수행합니다. 물론 기본적인 상,하 Flick의 경우 스크롤의 기능으로 거의 안착이 되었기 때문에 웹사이트의 제스쳐는 좀 더 다양한 고민이 필요한듯 합니다. 웹사이트 상에서의 다양한 마우스 제스쳐의 경험을 모바일웹의 경험으로 옮길 수 있다면, 모바일웹에서의 좀 더 풍부한 사용 경험을 제공할 수 있으리라 기대해봅니다.



Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. teevee

    상세히 비교하신 글 잘보았습니다. 전 크롬플러스를 사용하고 있는데 기본적인 것만 사용하는지라 큰 불편은 없는것 같아요. 수고하셨습니다.=)

    2010.03.28 18:15 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 저 모든 기능을 알고 사용하려면 반복과 숙달이 필요할 것 같습니다. 저도 주요한 몇개의 제스쳐 밖에 사용하지 않습니다. 들려주셔서 감사합니다.

      2010.03.30 00:53 신고 [ ADDR : EDIT/ DEL ]
  2. 댓글을 남겨주세요. ^^

    2010.05.21 09:54 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 크롬 플러스가 크롬이랑 같은 건 줄 알았는데, 아니네요. ㅠ.ㅠ 요새는 쿨노보라고 한다고 어디서 봤어요. 좋은 글 감사합니다.

    2012.09.29 16:14 신고 [ ADDR : EDIT/ DEL : REPLY ]