UX 및 HTML5: 사용자가 모바일 양식을 작성할 수 있도록 돕자(2부)

이 두 번째 부분에서는 모바일 전용 기능에 더 초점을 맞추고 싶습니다. 예를 들어 HTML5는 사용자가 모바일 양식을 채우고 데이터 형식을 지정하는 데 도움이 되는 정말 멋진 기능을 많이 제공했습니다. HTML5 속성이 어떻게 도움이 되는지 자세히 살펴보겠습니다 . 그런 다음 "고전적인" 양식 요소를 넘어 카메라, 위치 정보 및 지문 스캐너와 같은 모바일 기능을 사용하여 웹 사이트 및 기본 애플리케이션에서 모바일 양식 경험을 한 단계 끌어올리는 방법을 알아보겠습니다.

HTML5로 사용자 형식 콘텐츠 지원

이 시리즈의 첫 번째 부분에서 필드를 표시하는 방법에 대한 몇 가지 일반적인 조언을 보았습니다. 이제 좀 더 깊이 들어가 HTML5 코드 몇 줄로 모바일 양식을 개선할 수 있는 방법을 알아볼 차례입니다.

HTML5 모바일에 최적화된 장점

HTML5는 모바일 및 터치 장치용으로 양식을 최적화할 수 있는 가능성의 세계를 열어줍니다. 많은 흥미로운 새 입력 유형이 사용자를 돕기 위해 다양한 키보드를 트리거할 수 있습니다. 또한 브라우저에서 직접 미디어를 캡처하여 흥미로운 작업을 수행할 수도 있습니다.

숫자 데이터 입력

input type= number

HTML5 <input type=number> 속성은 입력 필드를 숫자로 제한합니다. 숫자가 아닌 것은 모두 거부하는 검증 시스템이 내장되어 있습니다.

일부 데스크탑 브라우저에서 이 입력은 사용자가 숫자를 증가시키기 위해 클릭할 수 있는 오른쪽에 작은 화살표로 표시됩니다. 모바일에서는 숫자가 있는 키보드를 열어 오타와 양식 유효성 검사 오류를 줄입니다. 입력의 모양과 느낌은 운영 체제에 따라 다릅니다.

입력은 소수와 음수를 허용해야 합니다(그러나 이를 존중하는 키보드는 거의 없습니다). W3C 사양에 설명된 대로 "type=number를 사용할지 여부를 결정하는 간단한 방법은 입력 컨트롤에 스핀박스 인터페이스(예: '위' 및 '아래' 화살표 사용)가 있는 것이 의미가 있는지 여부를 고려하는 것입니다." 이는 입력이 신용 카드 또는 지역 코드에 사용되지 않아야 함을 의미합니다.

pattern 및 inputmode 속성

숫자 입력에 몇 가지 제한 사항을 추가하려면 pattern 속성을 사용하여 값을 제어하려는 정규식을 지정할 수 있습니다.

다음과 같이 보입니다.

 <input type="number" name="quantity" pattern="[0-9]*" inputmode="numeric" />

이 패턴을 사용하여 iPhone(iPad 제외)에서 큰 버튼 숫자 키보드를 불러올 수 있습니다. 이 키보드에는 빼기 기호나 쉼표가 없으므로 사용자는 음수와 소수를 사용할 수 없습니다. 또한 여기에서 다른 키보드로 다시 전환할 수 없으므로 사용할 때 주의해야 합니다.

또한 패턴은 다른 유형의 입력에도 적용할 수 있습니다.

이 패턴만 사용하면 대부분의 Android 휴대전화에서 작동하지 않습니다. 이 작업을 수행하려면 여전히 input type=number 와 속성의 조합이 필요합니다.

inputmode

모바일 숫자 키보드만 트리거하고 type=number 및 pattern 혼란을 처리하고 싶지 않은 경우 텍스트 입력을 사용하고 inputmode=numeric 속성을 적용할 수 있습니다. 다음과 같이 보일 것입니다.

 <input type="text" name="quantity" inputmode="numeric" />

불행히도(작성 당시) Chrome 67 모바일에서만 이를 지원하지만 플래그 없이 Chrome 데스크톱 66에 도착해야 합니다.

양식에 숫자를 입력하는 방법에 대해 자세히 알아보려면 "숫자를 입력하고 싶었습니다"를 읽으십시오.

input type=tel

사용자가 전화번호를 입력하도록 하려면 type=tel 입력을 사용할 수 있습니다. 아래 스크린샷에서 볼 수 있듯이 iOS 키보드에서 위에서 설명한 패턴 속성과 동일한 숫자를 트리거합니다. 전 세계 전화번호의 복잡성으로 인해 이 입력 유형에는 자동 유효성 검사가 없습니다.

날짜 입력

기술적으로 숫자 데이터라 할지라도 날짜는 고유한 섹션을 가질 가치가 있습니다. 날짜 입력을 위한 몇 가지 HTML5 입력 유형이 있습니다. 가장 많이 사용되는 것은 input type=date 입니다. 지원되는 브라우저에서 날짜 선택기를 트리거합니다. 날짜 선택기의 모양은 브라우저와 OS에 따라 다릅니다. 브라우저가 input type="date" 를 렌더링하는 방법에 대해 자세히 알아보려면 " input type=date 복잡하게 만들기"를 읽는 것이 좋습니다.

또한 type=week 는 주를 선택하고 type=time 은 시간(최대 시간 및 분)을 입력하고 type=datetime-local 은 날짜 와 시간(사용자의 현지 시간 사용)을 선택합니다. 너무 많은 선택!

예를 들어 input type=date 는 예약 인터페이스에 적합합니다. 하지만 (합리적인 기본값에 대한 섹션에서 이미 보았듯이) 자신만의 날짜 선택기를 구축해야 하는 몇 가지 요구 사항이 있을 수 있습니다. 그러나 input type=date 는 날짜 선택기가 필요하고 작업을 위해 전체 JavaScript 라이브러리를 웹사이트로 가져오고 싶지 않은 경우 항상 좋은 옵션입니다.

그러나 때로는 날짜에 type=date 를 사용하지 않는 것이 더 좋습니다. 생년월일의 예를 들어보자. 제가 1960년에 태어났다면(저는 아닙니다 — 이것은 단지 예일 뿐입니다), 제가 2018년부터 시작한다면 제 생년월일을 선택하려면 여러 번 탭해야 할 것입니다. Android에서 저는 연도를 누르면 선택기에서 나는 몇 년 동안 일종의 드롭다운 휠을 얻습니다. 조금 나아졌지만 여전히 상당한 양의 스크롤이 필요합니다.

한 사용자는 Twitter에서 다음과 같이 말했습니다.

"저는 1977년생으로 불편함을 확인 할 수 있습니다. 스크롤하는 데 시간이 오래 걸릴수록 나이가 많이 느껴집니다 :-("

따라서 생년월일은 날짜 선택에 가장 적합한 후보가 아닐 수 있습니다.

URL, 이메일, 전화번호 및 검색

휴대 전화는 양식을 작성할 때 사용자 경험을 향상시키는 다른 키보드 및 입력 최적화 기능을 숨깁니다. 악마는 그들이 말하는 것처럼 세부 사항에 있습니다.

input type=url 필드를 사용하면 모바일에 최적화된 키보드가 나타나며 / (슬래시 키)에 직접 액세스할 수 있습니다. OS에 따라 아래 스크린샷의 .fr 과 같은 commons 최상위 도메인에 빠르게 액세스할 수도 있습니다. 이 버튼을 길게 누르면 다른 최상위 도메인에 대한 바로가기가 나타납니다. 이것은 또한 URL의 형식이 유효한지 확인하는 자동 브라우저 유효성 검사와 함께 제공됩니다.

type=emailfield 입력은 이메일에 최적화된 키보드를 불러와서 @ 기호에 빠르게 액세스할 수 있습니다. 이 입력이 유효하려면 필드 어딘가에 @ 가 있어야 합니다. 그것이 유일한 검증입니다.

입력 type=search 필드는 검색에 최적화된 키보드를 불러옵니다. 사용자는 키보드의 버튼에서 직접 검색을 시작할 수 있습니다. 필드를 지우고 새 쿼리를 입력하기 위한 작은 십자가도 있습니다.

범위 및 색상

마지막으로 살펴본 두 입력 유형은 특별히 모바일에 최적화되어 있지는 않지만 이를 사용하면 무거운 사용자 정의 JavaScript 라이브러리를 로드하지 않아도 되므로 모바일 사용자에게 좋은 아이디어입니다.

입력 유형=범위는 숫자를 입력하기 위한 시각적 UI 슬라이더를 제공합니다. 이 컨트롤의 UI는 브라우저에 따라 다릅니다.

input type=color는 사용자가 색상 값을 쉽게 입력할 수 있는 방법을 제공합니다. 많은 브라우저 구현에서 이것은 색상 선택기와 함께 제공됩니다.

HTML 미디어 캡처: 사진 촬영 및 업로드 및 사운드 녹음

나는 애플이 보안상의 이유로 웹사이트에서 간단한 input type=file 사용조차 허용하지 않았던 아이폰 3를 기억한다. 그 시절은 오래 전에 사라졌습니다. HTML 미디어 캡처 API를 사용하면 이제 장치의 다양한 센서에 액세스할 수 있습니다. 사진과 동영상을 캡처할 수 있으며 브라우저에서 직접 음성을 녹음할 수도 있습니다.

accept 속성을 사용하면 오디오, 이미지, 비디오와 같이 입력에서 허용할 미디어 종류를 지정할 수 있습니다. 예를 들어 사용자는 브라우저에 카메라에 대한 직접 액세스 권한을 부여할 수 있습니다.

코드는 다음과 같습니다.

 <input type="file" accept="image/*">

capture 속성을 사용하면 선호하는 캡처 모드를 지정할 수 있습니다. accept 속성 위에 capture 속성을 추가하면 브라우저에서 카메라나 음성 녹음기를 직접 열 수 있습니다.

 <input type="file" accept="image/*" capture> // opens the camera>

 <input type="file" accept="video/*" capture> // opens the camera in video mode

 <input type="file" accept="audio/*" capture> // opens the voice recorder 

브라우저에서 미디어를 직접 사용하는 방법에 대한 자세한 내용은 모바일 브라우저의 비밀에 대한 내 기사에서 "브라우저에서 직접 이미지, 비디오 및 오디오 액세스 및 처리" 섹션을 참조하세요.

HTML5 자동: 자동 수정, 자동 완성, 자동 채우기, 자동 대문자 및 자동 초점

HTML5에는 많은 자동 속성이 있습니다. 모바일 경험을 향상시키려면 자동화할 수 있는 것과 자동화할 수 없는 것에 대해 현명하게 판단해야 합니다. 다음은 몇 가지 일반적인 경험 법칙입니다.

• 이메일 주소, 번호, 이름, 주소, 도시, 지역, 지역 번호, 신용 카드 번호 등 사전이 취약한 항목에 대해 자동 고침을 비활성화 합니다.
• 이메일 필드 및 해당되는 경우 기타 필드(예: 웹 사이트 URL)에 대해 자동 대문자 사용을 비활성화합니다 . type=email 은 최신 버전의 iOS 및 Android에서 작업을 수행하지만 이전 버전이나 type=email 이 지원되지 않는 경우에는 어쨌든 비활성화합니다.
• autocapitalize 속성을 words 로 설정하여 사용자 가 입력하는 각 단어의 첫 글자를 자동으로 대문자 로 만들 수 있습니다. 이것은 이름, 장소 등에 유용할 수 있지만 다시 주의하고 테스트하십시오.

• input type=tel 의 경우 autocomplete="tel" 을 설정하십시오.
• 자동 초점을 사용하여 사용자가 페이지를 로드할 때 제어 요소에 autofocus 을 줄 수 있습니다. 그러나 사용자가 "연락처" 페이지를 열었다고 해서 양식의 첫 번째 필드로 바로 이동할 준비가 된 것은 아닙니다. 그러니 다시 현명하게 사용하세요.

더 많은 자동 완성 옵션을 원하면 전체 목록이 WhatWG Wiki에 있습니다. 올바른 것을 사용하는지 확인하십시오. 구현하고 테스트하고 다시 테스트하십시오.

HTML5 양식 유효성 검사

여기서 기술적인 세부 사항을 다루지는 않겠지만 HTML5에는 많은 필드에 대해 내장된 양식 유효성 검사 API가 있다는 것을 알아야 합니다. 인라인 유효성 검사 메시지를 표시하기 위해 JavaScript 라이브러리를 사용하지 않으려면 좋습니다. HTML5 양식 유효성 검사에 대해 UX 디자이너가 알아야 할 주요 사항은 다음과 같습니다.

• 유효성 검사 메시지는 브라우저 컨트롤입니다. CSS에서는 스타일을 지정할 수 없으며 브라우저마다 다릅니다.
• setCustomValidity 를 사용하여 JavaScript에서 메시지 텍스트를 변경할 수 있습니다.
• CSS3는 HTML 형식 유효성 검사를 위해 :invalid, :valid 및 :required 및 기타 의사 클래스를 제공합니다. 이것들은 흐림에 트리거되므로 현재로서는 거의 쓸모가 없습니다.

"네이티브 양식 유효성 검사, 파트 1"에서 Peter-Paul Koch는 HTML 및 CSS 양식 유효성 검사가 현재로서는 실제로 양식을 개선하지 못하는 이유에 대해 자세히 설명합니다.

사용자 데이터 저장을 위한 오프라인 지원

특히 모바일에서는 많은 일이 잘못될 수 있습니다. 실수가 발생합니다. 사용자가 브라우저에서 뒤로 버튼을 잘못 누르면 모든 데이터가 손실될 수 있습니다.

사용자가 페이지로 돌아오면 데이터를 다시 표시하는 것이 좋습니다 . 브라우저가 충돌하거나 사용자가 탭을 닫는 경우에도 마찬가지입니다. 사용자의 데이터를 로컬 또는 세션 저장소 에 저장하여 문제가 발생하더라도 손실되지 않도록 할 수 있습니다. Geoffrey Crofte는 이를 돕기 위해 JavaScript 라이브러리를 작성했습니다.

사용자가 양식을 제출할 때 연결이 끊어지면 데이터도 손실될 수 있습니다. 이를 방지하기 위해 ** HTML5 오프라인 API**와 서비스 작업자 API 를 조합하여 다음을 수행할 수 있습니다.

• 캐시에 데이터를 저장하고,
• 연결이 다시되면 자동으로 다시 보내보십시오.

이것을 코딩하는 방법을 배우려면 "오프라인 친화적 양식"에 대한 기사를 확인하십시오.

모바일 장치 기능은 경험을 한 차원 높일 수 있습니다.

1부에서는 모바일 양식을 향상시키기 위한 기본 공통 HTML 양식 요소와 속성을 고수했습니다. 그러나 모바일 장치 기능은 이제 HTML, CSS 및 JavaScript 웹 페이지를 표시하는 것 이상입니다. 그 작은 장치 에는 많은 센서가 장착되어 있습니다 . 그리고 우리는 사용자의 삶을 훨씬 더 쉽게 만들기 위해 네이티브 앱과 웹에서 많은 것들을 사용할 수 있을 것입니다.

사용자의 위치 감지

이전 섹션에서 장소와 주소에 대한 정보를 미리 채우는 방법에 대해 썼습니다. 좋은 시작이군요. 우리는 한 걸음 더 나아갈 수 있습니다. 사용자에게 위치를 입력하도록 요청하는 대신 위치를 감지할 수 있습니다 . 웹용 Geolocation API를 만나보세요. 기본 iOS, Android 및 Windows Phone 지리적 위치 API도 있습니다.

Citymapper는 사용자가 여행을 계획하는 데 도움이 되는 웹사이트이자 앱입니다. 사용자가 첫 번째 필드로 이동하면 "현재 위치 사용" 옵션이 표시됩니다. 선택하면 브라우저가 지리적 위치 데이터에 액세스할 수 있도록 허용하라는 메시지가 표시됩니다. 위치정보 API입니다. 그런 다음 브라우저는 찾은 위치를 자동 완성하고 사용자는 대상 필드로 이동할 수 있습니다. 기본 앱은 거의 동일한 방식으로 작동합니다.

사용자의 허가를 요청할 때 현명하게 대처하세요

이전 비디오에서 내가 Citymapper 웹사이트에 대한 내 위치에 대한 액세스 권한을 부여하는 데 동의해야 한다는 것을 눈치채셨을 것입니다. 브라우저에서 사용자는 웹사이트별 권한 웹사이트, API별 API를 처리합니다.

또한 허가를 요청하는 방법에도 주의해야 합니다 . 너무 빨리 요청하면 사용자가 지리적 위치, 알림 또는 기타 API에 대한 액세스를 거부할 수 있습니다. 또한 허가가 필요한 이유를 이해하지 못하는 경우 거부할 수도 있습니다. 한 번의 기회가 있습니다. 현명하게 사용하십시오 . 그 후에는 복구가 거의 불가능합니다. 저는 Android 고급 사용자이고 웹사이트에 부여한 권한을 재설정하려는 경우에도 브라우저에서 옵션을 검색해야 합니다. 사용자가 겪게 될 문제를 상상해 보십시오.

다음은 웹에서 권한 요청에 대한 몇 가지 일반적인 조언입니다.

• 소름 끼치는 위치 정보 또는 알림 스토커 가 되지 마십시오. 사용자가 귀하의 웹사이트에 도착하자마자 허가를 요청하지 마십시오 . 그들은 당신이나 당신의 서비스에 대해 아직 모를 수 있습니다.
• 사용자가 귀하의 웹사이트와 서비스를 찾도록 하십시오. 그런 다음 컨텍스트에서 권한을 요청하십시오 . 위치에 액세스하려면 필요할 때만 요청하십시오(Citymapper가 좋은 예).
• 허가가 필요한 이유와 허가로 무엇을 할 것인지 설명하십시오.

더 나아가고 싶다면 Luke Wroblewski(예, 다시 한번)가 허가 요청 과정을 도와줄 멋진 비디오를 만들었습니다.

더 나은 결제 경험

양식에서 크게 개선된 부분은 전체 체크아웃 결제 경험입니다. 여기서도 장치의 센서는 이를 거의 고통 없는 경험으로 만들 수 있습니다. 유일한 고통은 사용자가 지출하는 금액입니다.

iOS 신용 카드 스캐너

이전 섹션에서는 사용자의 이전 입력을 기반으로 하는 신용 ​​카드 자동 감지 및 자동 완성 기능에 대해 썼습니다. 이것은 여전히 ​​사용자가 신용 카드 데이터를 한 번 이상 입력해야 함을 의미합니다.

애플 은 그것 의 신용 카드 스캐너 와 함께 다음 단계 로 이것을 가지고 갔다 . Safari의 iOS 8부터 사용자는 카메라를 사용하여 신용 카드 정보를 스캔하고 자동 완성할 수 있습니다 . 이 마법을 수행하려면 자동 완성 cc-number 속성과 이를 신용 카드 필드로 식별하는 이름을 추가해야 합니다. Apple은 이에 대한 공식적인 정보가 많지 않지만 일부 사람들은 일부 테스트를 수행하고 결과를 StackOverflow에 올렸습니다.

Safari에는 또한 사용자가 신용 카드를 추가하는 데 사용할 수 있는 자동 완성 옵션이 있어 여러 웹사이트에서 재사용할 수 있습니다.

Google Pay API로 체크아웃 한 단계 더 나아가기

Google은 Google Pay API와 유사한 것을 출시했습니다. API를 웹사이트에서 구현 하면 수동으로 결제 정보를 입력할 필요가 없습니다 . 한 단계 더 나아가 청구 및 배송 주소도 저장할 수 있습니다.

사용자는 저장한 다양한 결제 정보를 표시하는 대화상자를 Chrome에서 받습니다. 그들은 사용할 것을 선택할 수 있고 대화 상자를 통해 직접 지불할 수 있습니다.

지불 요청 API의 표준화된 버전은 현재 W3C 후보 권장 사항입니다. 이것이 브라우저에서 구현되면 사용자가 API를 요청하는 단일 버튼으로 체크아웃할 수 있습니다. 이후의 모든 단계는 기본 브라우저 대화 상자에서 처리됩니다.

인증을 더 쉽게 만들기

휴대 전화는 대부분의 경우 사람들이 일반적으로 다른 사람과 공유하지 않는 개인 장치입니다. 이것은 인증을 위한 몇 가지 흥미로운 기회를 열어줍니다.

매직링크

나는 암호 관리자를 사용합니다. 비밀번호의 99%를 모릅니다. 모두 무작위로 생성됩니다. 새 Slack 작업 공간에 로그인하려면 다음을 수행해야 합니다.

1. 내 비밀번호 관리자를 열고,
2. 내 마스터 비밀번호를 입력하고,
3. 작업 공간을 검색하고,
4. 비밀번호를 복사하여 Slack 앱에 붙여넣습니다.

지루한 과정이지만 Slack은 더 나은 옵션을 제공할 만큼 충분히 똑똑했습니다.

많은 사용자가 휴대전화에서 메일을 동기화합니다. 슬랙은 그것을 이해했다. 앱에 새 Slack 작업 공간을 추가할 때 비밀번호를 사용하여 로그인하거나 "매직 링크" 옵션을 요청할 수 있습니다. 후자를 선택하면 Slack이 사서함으로 매직 링크를 보냅니다 . 메일을 열고 큰 녹색 버튼을 클릭한 다음 — ta-da! — 로그인했습니다.

이 매직 링크에는 인증 토큰이 포함되어 있습니다. Slack 앱은 이를 포착하고 비밀번호를 요구하지 않고 사용자를 인증합니다.

스마트 식별을 위한 지문

저는 거의 모든 은행 업무를 모바일 기기로 합니다. 그리고 내 은행 계좌에 로그인할 때 프랑스어 Societe General 은행 앱과 독일 N26 앱 사이에는 엄청난 차이가 있습니다.

Societe Generale에는 로그인 문자열과 암호가 있습니다. 10개의 임의 숫자인 로그인 문자열을 기억하도록 앱에 요청할 수 있습니다. 나는 그것을 기억할 수 없다; 나는 그것을 위해 암호 관리자를 사용합니다. 나는 여전히 주문 제작 키패드에 6자리 암호를 기억하고 입력해야 합니다. 물론 숫자의 위치는 로그인할 때마다 변경됩니다. 보안 — 예, 압니다. 또한 3개월마다 이 암호를 변경해야 합니다. 마지막으로 암호를 변경해야 했을 때 저는 대부분의 사람들이 하는 대로 했습니다. 거의 동일한 암호를 선택했습니다. 왜냐하면 또 다른 6자리 숫자를 기억하고 싶지 않기 때문입니다. 그리고 물론, 나는 그것을 기억할 것이라고 확신했기 때문에 비밀번호 관리자에 그것을 입력하지 않았습니다. 초보 실수. 2주 후에 로그인을 시도했습니다. 물론 잊어버렸습니다. 세 번 실패했지만 내 계정이 차단되었습니다. 다행히 저는 이 계정을 저축용으로만 사용합니다. 앱에서 새 비밀번호를 요청할 수 있습니다. 은행에서 룩셈부르크에 있는 내 집 주소로 종이 우편으로 새로운 6자리 암호를 보내는 데 거의 일주일이 걸렸습니다. 응.

반면에 N26은 내 이메일 주소를 로그인 문자열로 사용합니다. 암호 관리자 없이는 기억할 수 있습니다. 로그인하고 싶을 때 Xperia 휴대전화의 시작 버튼에 손가락을 대면 됩니다. 백그라운드에서 내 휴대폰은 내 지문을 스캔하고 나를 인증합니다. 그래도 작동하지 않으면 암호로 대체할 수 있습니다.

같은 기기, 두 개의 앱, 두 개의 완전히 다른 경험.

Android와 iOS 모두에서 점점 더 많은 앱이 사용자 에게 지문으로 인증 할 수 있는 가능성을 제공합니다. 더 이상 암호가 필요하지 않습니다. 흥미롭고 우아한 솔루션입니다.

물론 사람들은 이에 대해 약간의 보안 우려를 표명했습니다. NIST(National Institute of Standards and Technology)의 경우 생체 인식이 충분히 안전한 것으로 간주되지 않습니다. 생체 인식을 두 번째 인증 요소와 결합하는 것이 좋습니다.

지문 센서도 속일 수 있습니다. 예, 스파이 영화처럼 말이죠. 남편이 잠든 사이 남편의 전화를 잠금 해제하기 위해 엄지손가락으로 남편의 불륜을 저지른 여성이 남편의 외도 사실을 알고 착륙을 강요당한 비행기에 대해 들어보셨나요?

얼굴 인식 및 얼굴 ID

2018년, Apple은 새로운 Face ID를 탑재한 iPhone X를 출시했습니다. 사용자는 얼굴을 사용하여 iPhone X의 잠금 을 해제할 수 있습니다. 물론 일부 다른 Android 휴대폰과 Windows 태블릿 및 컴퓨터에서는 이 기능을 더 일찍 제안했습니다. 그러나 Apple이 무언가를 출시하면 그것은 "사물"이 되는 경향이 있습니다. 현재 이 기술은 휴대폰과 컴퓨터의 잠금을 해제하기 위한 인증으로 주로 사용됩니다.

얼굴 인식 기술에는 몇 가지 꽤 큰 문제가 있습니다. 첫째, 일부 알고리즘은 쉽게 해킹할 수 있는 인물 사진으로 속일 수 있습니다. 또 다른 더 큰 관심사는 다양성입니다. 얼굴 인식 알고리즘은 유색인종을 인식하는 데 어려움이 있는 경향이 있습니다. 예를 들어, 흑인 연구원은 자신의 프로젝트를 테스트하기 위해 흰색 마스크를 착용해야 했습니다. 연구원은 Joy Buolamwini이고 그녀는 이 문제에 대해 TED 강연을 했습니다.

일부 얼굴 인식 소프트웨어는 일부 세관에서 국경 처리 속도를 높이는 데 사용되기도 합니다. 뉴질랜드에서 사용되고 캐나다에서도 사용될 예정입니다.

우리 대부분은 얼굴 인식을 대규모로 사용하는 시스템의 잠재적인 문제와 결과를 보기에 충분한 공상 과학 소설을 보았습니다. 전화 잠금 해제라는 사적인 공간 밖에서 사용되는 이러한 종류의 기술은 논란이 되고 무서울 수 있습니다.

Google: 원터치 가입

사용자에게 Google 계정이 있는 경우 Google의 원터치 가입 혜택을 받을 수 있습니다. 웹 사이트를 방문하고 인라인 대화 상자에서 계정을 만들라는 메시지가 표시되면 사용자는 암호를 입력할 필요가 없습니다. Google은 사용자의 Google 계정에 연결된 안전한 토큰 기반 비밀번호 없는 계정을 제공합니다. 사용자가 돌아오면 자동으로 로그인됩니다. Smart Lock에 비밀번호를 저장하면 다른 기기에서도 자동으로 로그인됩니다.

참고 : 이것은 흥미로운 암호 없는 솔루션입니다. 물론, 그것을 사용함으로써 사용자는 Google에 연결되어 모든 사람이 편안하게 느낄 수는 없습니다 .

결론

사용자가 양식을 채우는 데 도움이 되는 모바일 기능을 사용하기 시작하면 정말 멋진 일을 많이 할 수 있습니다. 양식을 작성할 때 모바일 우선 사고 방식이 필요합니다. 그렇지 않으면 우리가 익숙한 데스크탑 기능에 갇히게 될 것입니다.

다시 말하지만, 장치의 기능에 주의하십시오. 센서에 장애가 발생하거나 사용자가 액세스를 거부할 경우를 대비 하여 항상 대비책을 마련 하십시오. 이러한 기능을 해당 기능에 대한 유일한 옵션으로 만들지 마십시오(지리 위치에 의존하는 지도 앱을 구축하지 않는 한).

이것은 내가 몇 가지 일반적인 UX 및 사용성 조언과 모범 사례를 제공한 두 개의 정말 긴 기사 시리즈의 끝입니다. 결국 중요한 것은 양식과 사용자 입니다. 여기에 설명된 일부 항목은 사용자에게 특별히 적용되지 않을 수도 있습니다. 누가 알겠습니까? 그래서, 당신이 무엇을 하든지, 그것에 대해 내 (또는 루크)의 말을 받아들이지 마십시오. 실제 장치에서 실제 사용자와 함께 테스트하십시오. 측정합니다. 그리고 다시 테스트합니다. 사용자 조사 및 사용성 테스트를 수행 하십시오. 사용자 경험은 복사하여 붙여넣는 모범 사례와 마법의 레시피에 관한 것만이 아닙니다. 당신은 당신을 위해 작동하도록 조리법을 적용해야합니다.

즉, 테스트하십시오. 실제 장치에서 테스트하십시오. 실제 사용자와 함께 테스트하십시오.