바오밥나무

[번역] 고통없는 계정 UX에 대한 3가지 법칙 : 로그인

In UI/UX Posted Jan 17, 2018
Extra Form
저작자 Jessica Enders
출처 https://www.sitepoint.com/3-rules-painle...n-screens/
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

이 기사의 첫 부분에서는 세 가지 규칙을 따르면 계정 관리를 덜 고통스럽게 만들 수 있다고 설명했습니다.

 

해당 규칙을 빠르게 요약하려면 다음을 수행하십시오.

 

1. 사용자의 추측을 유도하지 마십시오.

 

웹상의 거의 모든 서비스는 계정 관리를 약간 다르게 처리합니다. 따라서 서비스 요구 사항에 대해 명시해야합니다. 그렇지 않으면, 당신은 단지 잔인합니다.

 

2. 가용성과 보안의 조화

 

종종 보안 전문가는 사용자 환경을 손상시키는 접근 방식을 고집합니다. 사용성이 좋지 않으면 해결 방법으로 이어질 것이고 해결 방법은 취약한 보안으로 이어지기 때문에 이것은 어리석은 일입니다. 대신 안전하고 사용하기 쉬운 디자인을 목표로하십시오.

 

3. 단순하게 유지하십시오.

 

계정 관리는 사용에있어 가장 큰 장벽 중 하나입니다. 간단하고 매끄럽고 통증이없는 디자인으로 장벽을 실제로 보이지 않게하십시오.


첫 번째 부분에서는 계정 을 만드는 프로세스를 개선하기 위해 이러한 규칙을 적용하는 방법을 보여 줬습니다 . 이제 동일한 규칙을 사용하여 로그인 경험을 향상시키는 방법을 살펴 보겠습니다.

 

로그인 프로세스

규칙 #1 : 사용자가 추측하지 못하게하십시오.

로그인 화면은 일반적으로 상대적으로 최소이며 사용자 이름 필드와 암호 필드가 있습니다. 특히 사용자에게 설명하는 데 도움이되는 정보를 숨기면 Minimal이 항상 단순하지는 않습니다.

 

  • 사용자 이름이 사용자가 만들지 않은 식별자 (예 : 전기 계좌 번호) 인 경우 사용자에게 사용자 이름과 가져올 수있는 위치를 알려줍니다 (예 : "청구서 오른쪽 상단").
  • 사용자 이름이 이메일 주소 인 경우 사용자에게 알리십시오.
  • 암호가 숫자 핀인 경우 사용자에게 알리십시오.
  • 공간이 허용되면 "내 계정 정보 기억"대신 "이 컴퓨터의 사용자 이름 기억"을 사용하십시오. ( "기억하기"는 실제로 사용자에게 어떤 일이 일어날지를 알려주지 않습니다.)

 

예 : 하지 않을 일

도로 통행료를 지불하는 전자 태그 제공 업체 인 Roam Express는 귀하의 태그 번호를 어디에서 찾을 수 있는지 알려주지 않습니다.

 

14038336767-roam-express.png

 

예 : 더 나은 접근법

LG 전자는 사용자 이름이 전자 메일 주소라는 점과 "내 정보 기억"확인란이 어떤 역할을하는지 구체적으로 설명합니다.

 

14038337208-lg.png

 

규칙 #2 : 유용성을 갖춘 보안의 균형

로그인시, 주요 도전 과제 대 보안 문제는 잘못된 시도를 다루는 방법과 관련됩니다. (합법적 인) 사용자에게 제공 할 수있는 정보가 많을수록 복구하고 올바르게 로그인 할 수 있습니다. 그러나이 정보는 블랙 햇 해커가 사용자 이름과 암호를 확인하는 데 사용할 수도 있습니다.

 

해결 방법은 다음과 같습니다.

  • 알맞은 양의 정보를 제공하십시오 (예 : 로그인에 실패한 경우 사용자에게 알려주고 가능한 경우 문제가 사용자 이름 또는 비밀번호와 관련되었는지 여부를 알려줍니다).
  • 사용자에게 적어도 두 번 이상, 세 번 시도하는 것이 바람직합니다. 오타는 쉽게 만들 수 있습니다. 과
  • 사람들을 모두 잠그는 것보다는 시간 제한과 벌칙을 적용하십시오.

시간 제한과 벌칙은 토마스 백달 (Thomas Baekdal)의 기사 암호의 사용 편의성 에 잘 서술되어 있습니다.

 

자동화 된 해킹 스크립트가 효과적으로 작동하지 못하도록 방지하기 만하면됩니다. 당신이해야 할 일은 다음과 같습니다.

 

1. 로그인 시도 사이에 시간 지연을 추가하십시오. 사람들이 몇 번이고 다시 로그인 할 수 있도록 허용합니다. 각 시도 사이에 5 초 지연을 추가하십시오. 눈에 띄지 않을 정도로 짧습니다 (잘못된 암호를 시도하고 새 암호를 입력하는 데 5 초 이상 걸립니다). 또한 해커가 초당 100 회가 아닌 5 초마다 로그인 요청을 할 수 있도록합니다.

 

2. 누군가가 틀린 암호를 1 시간 같이 무언가의 10 시간보다는 더 많은 것을 타자를 친 경우에 형벌 기간을 추가하십시오. 다시 말하지만, 이것은 해킹 스크립트가 효과적으로 작동하는 것을 심각하게 방해합니다.

 

예 : 더 나은 접근법

우버는 두 가지 자격 증명 중 어떤 것을 잘못 읽었는지 알려줍니다.

 

14038338309-uber.png

 

규칙 #3 : 단순하게 유지하십시오.

로그 형태가 얼마나 작 으면 모두 단순해야한다고 생각할 것입니다. 아아, 틀렸어! 이러한 서비스가 어떻게 프로세스를 복잡하게 만들 었는지 살펴보십시오.

 

예 : 하지 않을 일

West Australian Symphony Orchestra는 로그인시 프로모션 코드 를 묻습니다 .

 

140383388610-waso.png

 

예 : 하지 않을 일

Co-op Bookshop은 필요 이상으로 로그인을 어렵게 만들었습니다. 그들은 암호 필드를 숨겨 이메일 주소를 입력하고 확인되지 않은했다 때까지 (더 적은, 탭 키를 사용하여!). (고맙게도, 최근의 재 설계 이후, 그들은 로그인을위한보다 표준적인 접근 방식으로 옮겼습니다.)

 

140383395211-coop.png

 

위의 두 예제는 불필요한 필드 나 단계를 추가 한 것으로, 분명히 피해야 할 사항입니다. 로그인을 간단하게 유지하려면 어떻게해야합니까?

 

  • 사용자가 필요할 때마다 클릭 유도 문안 (call-to-action) 로그인을 쉽게 찾을 수 있어야합니다. 오른쪽 상단 모서리는 일반적인 위치입니다.
  • 셀프 서비스 및 사용자 비밀번호 (사용자가 선택한 경우 사용자 이름)를 즉시 재설정 할 수 있습니다. 재설정 작업에는 충분한 식별이 필요합니다 (보안 문제보다는 2 단계 인증이 이상적이며 이상적으로 구현하기가 어렵습니다). 전자 메일을 통해 "명확한"비밀번호 (특히 영구 비밀번호)를 보내지 마십시오. 전자 메일을 도청하거나 해킹 할 수 있습니다. 이러한 이유로 리셋을 복구하는 것이 좋습니다.
  • 사용자 이름이 이메일 주소이고 사용자가 휴대 전화 또는 태블릿에있는 경우 기기의 이메일 입력에 최적화 된 키보드로 전환하십시오. 마찬가지로 핀인 비밀번호의 숫자 키보드로 전환하십시오. 자세한 내용은 터치 키보드 유형을 참조하십시오.
  • 대부분의 경우 로그인(또는 회원 가입) 폼에 "삭제" 혹은 "초기화" 버튼이 필요하지는 않을 것입니다. (위의 하지 말아야 할 것들의 Roam Express의 사례를 보시길)
  • '사용자 이름 찾기'및 '비밀번호 찾기'링크를 각각의 입력란에 가깝게 두십시오.
  • "log in"과 "sign in" 사이에서 너무 고민하지 마십시오.두 가지 모두 장점과 단점이 있습니다. 예를 들어, "log in"은 기술적 전문 용어이지만, "sign in"은 "sign up"과 더 쉽게 혼동됩니다. 하나를 선택하고 일관적으로 사용하십시오. 이 경우 일관성은 단어의 특정 선택보다 훨씬 중요합니다. 아, "login"은 명사 (예 : "What’s your login?") 인 반면 "log in"/ "sign in"은 동사입니다 (예 : "Please log in to your account"). "로그인은 동사가 아닙니다."를 참조하십시오 .

 

예 : 하지 않을 일

Computershare는 잊어 버린 사용자 이름 / 암호 링크를 해당 필드와 멀리 떨어져있을뿐만 아니라 눈에 잘 띄지 않는 파란색 로그인 상자 (거의 보이지 않을 수도 있음) 외부에 배치합니다.

 

140383450412-computershare.png

 

예 : 더 나은 접근법

Computershare와 달리 Skype는 사용자 이름 입력란 바로 아래에 잊어 버린 사용자 이름 링크 ( "Forgotten your Skype Name?")을 입력하는 것이 이상적입니다. 패스워드 분실 링크도 마찬가지입니다.

 

140383457213-skype.png

 

예 : 하지 않을 일

여행 사이트 카약은 모바일을 통해 이메일 주소를 입력 할 때 키보드를 조정하지 않습니다.

 

140383462414-kayak.png

 

 

예 : 더 나은 접근법

Tripadvsor는 모바일을 통해 이메일 주소를 입력 할 때 키보드를 조정합니다.

 

144497719916-tripadvisor-576x1024.png

 

 

여기까지입니다. 고통없는 회원 가입 및 로그인을 위해서는:

 

  • 사용자가 추측하지 못하게하십시오.
  • 가용성과 보안의 균형을 유지하십시오. 과
  • 단순하게 유지하십시오.

여기서 다루지않은 법칙을 적용하는 다른 방법이 있습니까? 의견을 통해 알려주십시오.

 

이제 훌륭한 계정 관리 경험을 만들어보십시오!

 

 

 

3 Rules for Painless Account UX: Login

 

In the first part of this article, we outlined how following three little rules can make account management less painful.

 

To quickly recap those rules:

 

1. Don’t make the user guess

Almost every service on the web handles account management slightly differently. As a result, you have to be explicit about the requirements for your service. Otherwise, you’re just being cruel.

2. Balance security with usability

Often, security folk will insist on an approach that compromises the user experience. This is foolish, because poor usability will lead to workarounds, and workarounds in turn lead to weakened security. Instead, aim for a design that is both secure and usable.

3. Keep it simple

Account management is one of your biggest potential barriers to usage. Make the barrier practically invisible through a simple, seamless, pain-free design.

In that first part, we showed how to apply these rules to improve the process of creating new accounts. Now let's take a look at using those same rules to improve the experience of logging in.

 

The Login Process

Rule #1: Don’t make the user guess

Log in screens are usually relatively minimal, with a field for a username and another for password. Minimal doesn’t always equal simple, though, especially if you hide information that helps explain things to users.

 

If the username is an identifier that the user didn’t create ? e.g. an electricity account number ? tell users what the username is and where they can get it (e.g. “at the top right corner of your bill”).

If the username is an email address, tell users.

If the password is a numeric pin, tell users.

If space allows, instead of “Remember me” use “Remember username on this computer”. (“Remember me” doesn’t really tell the user what will happen.)

Example: What not to do

Roam Express, a provider of electronic tags for paying road tolls, doesn’t tell you where you could find your tag number.

 

Roam Express

 

Example: A better approach

LG do better, being specific about the username being an email address, and what the “remember me” checkbox will do.

 

LG Login

 

Rule #2: Balance security with usability

With logging in, the main challenge security versus usability challenge relates to how you deal with incorrect attempts. The more information you can give the (legitimate) user, the more able they are to recover and log in correctly. However, this information can also be used by black-hat hackers to ascertain usernames and passwords.

 

The solution is to:

 

give a moderate amount of information (e.g. tell the user when log in has failed and, if you can, whether the problem was with the username or the password);

give users at least two and preferrably three attempts ? typos are easy to make; and

apply time limits and penalties, rather than locking people out altogether.

Time limits and penalties are best described by Thomas Baekdal in his article The Usability of Passwords:

 

All you need to do is to prevent automatic hacking scripts from working effectively. What you need to do is this:

 

1. Add a time-delay between sign-in attempts. Instead of allowing people to sign-in again and again and again. Add a 5 second delay between each attempt. It is short enough to not be noticeable (it takes longer than 5 seconds to realize that you have tried a wrong password, and to type in a new one). And, it forces the hacker to only be able make sign-in requests 1 every 5 seconds (instead of 100 times per second).

 

2. Add a penalty period if a person has typed a wrong password more than, say, 10 times, of something like 1 hour. Again, this seriously disrupts the hacking script from working effectively.

 

Example: A better approach

Uber tell you which of your two credentials you’ve gotten wrong.

 

Uber login screen

 

Rule #3: Keep it simple

You’d think, given how small a log in form is, they must all be simple. Alas, you’d be wrong! Have a look at how these services overcomplicated the process.

 

Example: What not to do

The West Australian Symphony Orchestra asks for a promo code at log in.

 

Western Australia Symphony Orchestra login screen

 

Example: What not to do

The Co-op Bookshop used to make logging in way more difficult than it needed to be. They hid the password field until after the email address had been entered and validated (using the tab key, no less!). (Thankfully, after a recent redesign, they’ve moved to a more standard approach for log in.)

 

Coop Bookshop login screen

 

The two examples above show the addition of needless fields or steps, something you should definitely avoid. What else can you do to keep login simple?

 

Make sure the log in call-to-action is easy to find, whenever users might want it. The top right hand corner is a common location.

Enable self-service and immediate reset of user passwords (and also usernames, if chosen by the user). Resetting should require sufficient identification (ideally two-factor authentication rather than security questions, which are hard to implement well). Do not send passwords “in the clear” e.g. via email ? especially permanent passwords ? as email can be intercepted or hacked. This is why resetting is preferable to recovery.

If the username is an email address and user is on a mobile or tablet, switch to the device’s email input-optimised keyboard. Similarly, switch to a numeric keyboard for passwords that are pins. See Touch Keyboard Types for more information.

You most definitely do not need a “clear” or “reset” button on a log in (or registration) form (see above Roam Express example of what not to do)!

Put “Forgot username” and “Forgot password” links in close proximity to their respective fields.

Don’t worry too much about “log in” versus “sign in”, there are pros and cons to both. For instance, some argue “log in” is technical jargon, but then “sign in” is more easily confused with “sign up”. Pick one approach and stick with it; in this case consistency matters much more than the specific choice of words. Oh and note that “login” is a noun (e.g. “What’s your login?”) whereas “log in”/”sign in” are verbs (e.g. “Please log in to your account”). See “Login Is Not a Verb”.

Example: What not to do

Computershare put the forgot username/password links not only a long way away from the corresponding fields but also outside the prominent blue login box (which almost guarantees they won’t be seen).


  1. [번역] 빵조각 메뉴: 무엇, 언제, 어떻게

    Read More
  2. [번역] 고통없는 계정 UX에 대한 3가지 법칙 : 로그인

    #UI/UX 읽기
    Read More
  3. [번역] 이 이메일에 회신하지 마시오

    #UI/UX 읽기
    Read More
  4. Survivorship Bias (생존자 편향의 오류)

    #Mkt 읽기
    Read More
  5. Top 25 Free Mobile Friendly & Responsive HTML Email Templates 2017

    #Web 읽기
    Read More
  6. Mobile Application Frameworks (HTML, CSS & JavaScript)

    #UI/UX 읽기
    Read More
  7. 여러 도메인 추적하기(Cross Domain Tracking)

    #GA 읽기
    Read More
  8. Envato Market의 Standard 라이센스(Regular 라이선스 vs. Extended 라이선스)

    #Web 읽기
    Read More
  9. 코딩이 필요 없는 웹사이트 제작 툴 & 사이트 10선

    #Web 읽기
    Read More
  10. 기술에 대해 "충분히 아는" PM이 되는 길

    #Web 읽기
    Read More
  11. 주목해야할 5개의 엔터프라이즈 오픈 소스 위키

    #Web 읽기
    Read More
  12. 어플리케이션 생명주기 관리를 위한 무료 소프트웨어

    #Web 읽기
    Read More
  13. TOP5 오픈 소스 프로젝트 관리 도구

    #Web 읽기
    Read More
  14. [번역] 이메일 마케팅: 고객의 참여를 높이기 위한 7가지 이메일 디자인과 문구 비법

    #UI/UX 읽기
    Read More
  15. [번역] 면적 과잉 : 사이드바 내비게이션을 단순화하기

    #UI/UX 읽기
    Read More
  16. [번역] 상단 내비게이션 vs 왼쪽 내비게이션 : 어떤 것이 더 적합한가?

    #UI/UX 읽기
    Read More
  17. NRE (Non-recurring engineering)

    #Web 읽기
    Read More
  18. IT용어중 POC, Pilot, BMT의 업계에서 통용되는 의미에 대한 정리

    #Web 읽기
    Read More
  19. 프로젝트 라이프 사이클의 이해

    #Web 읽기
    Read More
  20. 모바일 터치 제스쳐 정의

    #UI/UX 읽기
    Read More
목록
Board Pagination Prev 1 2 3 4 Next
/ 4