모멘티 UXOX 두번째 시간 입니다. 사용자는 웹사이트 혹은 어플리케이션 에서 텍스트 인풋이 많은 경우를 매우 싫어 합니다. 극단적인 경우,서비스를 잘 사용하던 사용자라고 하더라도,정리되지 않은 텍스트 인풋이 많이 나오게되면,서비스를 바로 종료하게 됩니다. 그렇다면, 어떻게 하면 조금이라도, 정보를 입력하는 사용자를 달래면서, 회원가입/정보입력을 완료하게 할 수 있을까요? 입력 폼을 서브 카테고리로...
텍스트 인풋에 적합하지 않은 정보를 입력하는 경우, 서비스는 사용자에게 해당되는 오류 메시지를 제공하고, 올바른 정보를 입력하도록 가이드를 주게 됩니다. 그러나, 그 가이드가 적절하지 않거나, 잘못된 정보를 제공하는 경우, 사용자는 회원가입에서 이탈하거나, 서비스 이미지에 타격을 입을 수 있습니다. 그렇다면, 어떻게 적절한 정보 입력 하도록 사용자 경험을 제공할 수 있을까요? 잘못된 정보가 입력 된, 텍스트 인풋 하단에, 오류 메시지를 즉각...
텍스트 인풋의 도움말은 바로 확인 가능한 곳에 노출합니다. 로그인 혹은 회원가입 시, 비밀번호 형식 등 인풋에 대한 도움말(힌트)를 제공하여야 하는 경우가 있습니다. 도움말(힌트)는 필수적이면서, 빠르게 소비되는 일시적인 정보로써 사용자는 그 정보를 확인하는데에 아주 적은 시간을 소모하길 무의식 중에 원합니다. 그렇기 때문에 추가 동작이 필요한, 마우스 오버 도움말 등의 방식은 사용자에게 외면받을 가능성이 매우 큽니다. 도움말(힌트)는 사용자가 텍스트 인풋에 집중하였을때 바로 확인이 가능하도록 직접적으로...
결제 단계가 많고 어려울 수록, 사용자가 구매하지 않을 이유를 만들어 냅니다. 사용자는 상품이나 콘텐츠를 구매할때 결제가 완료되는 순간까지, 구매할까 말까를 고민합니다. 고민하는 사용자에게 결제 단계는 곧 구매율에 영향을 줍니다. 또한 어려운 결제 프로세스는 사용자에게 부정적인 이미지를 생산하여, 경쟁사에 사용자를 빼앗길 수 있습니다. ...
날짜 입력 시에는 달력 UI를 활용합니다. 과거의 많은 웹사이트의 날짜 입력 폼에서는 셀렉트 박스가 많이 이용되었습니다. 그 당시에는 달력을 이용한 입력 방식을 개발하는 것이 개발에는 많은 부담었습니다. 하지만 요즘은 달력을 이용한 입력 방식을 제공하는 UI 라이브러리도 많아 개발에 어려움이 없습니다. 가능하다면 사용자에게 직관적이고, 빠른 선택이 가능한 날짜 입력방식으로 달력을 제공하는 것이 좋습니다. ...
레이블과 플레이스홀더는 명확히 다른 용도로 사용됩니다. 가끔 로그인이나 회원가입을 하다보면, 레이블이 플레이스홀더에 사용된 경우를 종종 확인하게 됩니다. 레이블이 플레이스홀더에 사용되는 경우, 레이블의 컬러가 비활성화 되어 있어, 시각적으로 인지가 어렵고, 또한 타이핑이 시작되면, 지금 작성하고 있는 레이블이 무엇인지 확인할수 없습니다. 심지어 레이블을 확인하기 위해 작성한 내용을 지우는 경우도 있습니다. 이렇듯 레이블과 플레이스 홀더는 각각의 명확한 사용 목적이 있으며, 혼용하지 않는...
불필요한 텍스트 인풋의 분리는 2배의 시간 소요와 불편을 유발합니다. 많은 웹사이트의 회원가입 폼이 이메일 입력을 받을 경우, '@'의 앞부분과 뒷부분으로 분리하여, 입력을 받는 경우가 많습니다. 물론 'naver.com'이나, 'gmail.com' 처럼 기존에 많이 사용하는 호스팅 업체의 도메인을 셀렉트 박스 선택을 통해 고를 수 있도록 하는 경우, 도메인을 외우지 못하거나, 스펠링에 어려움을 겪는 사용자에게 사용이 편리 할...
정보의 유형에 따라, 적절한 입력 방식이 존재합니다. 쇼핑몰에서 상품 상세 검색 기능을 기획하다 보면 상품의 가격대를 입력하는 기능을 만들게 됩니다. 상품의 가격대는 대부분 최소, 최대 금액을 입력하여, 사이에 존재하는 가격대의 상품을 검색하게 됩니다. 이 순간, 최소, 최대 금액을 직접 텍스트로 입려하게 되면, 제품 가격 범위에 대한 직관성이 떨어지고, 일일히 가격을 숫자로 타이핑...
한줄로 배열한 폼은 직관적이고 자연스럽습니다. 회원가입 등의 폼 기획/디자인을 진행하다보면,화면 공간을 효율적으로 조정하기 위하여,2줄 이상의 폼을 배열하는 경우가 있습니다.2줄 이상으로 디자인된 폼은사용자의 자연스러운 시선을 방해하며,반응형 웹사이트 개발에도 더 많은공수를 발생합니다.한줄로 폼을 배열함으로써,사용자에게 직관적이고 자연스러운서비스를 제공할 수 있습니다. ...
항목이 많은 경우에는 '셀렉트(드롭다운) 박스'를 항목이 많지 않은 경우에는 '라디오 버튼'을 이용합니다. '셀렉트(드롭다운) 박스'는 원하는 항목을 선택 하기 위하여1. 셀렉트 박스를 열고, 2. 항목을 찾아 선택하는총 2단의 스텝이 필요하기 때문에,'셀렉트 박스'가 많아질 수록, 사용자로 하여금더 많은 액션을 취하도록 합니다. 그러므로 선택 할 항목이 적은 경우에는'라디오 버튼'을 이용하여 사용자의...