2024/11 3

[UX스터디] 입력 필드 UI를 만들어 보자 (입력 전/중/후 상태를 고려하여)

입력 필드는 모바일 앱 또는 웹 서비스에서 가장 중요한 UI 요소 중 하나입니다.회원가입, 로그인, 본인인증에서부터 송금, 구매, 배송, 주식 매수/매도 등 다양한 거래를 처리하기 위해서, 사용자가 직접 특정한 값을 입력해줘야 합니다.ID는 무엇인지, 얼마를 보내고 싶은지, 주소지는 어디인지, 카드 번호는 무엇인지 등등이렇게 다양한 값을 적는 입력 필드를 만들기 위해서는 입력 전-중-후의 각 단계별로 고려해야 할 사항들이 있습니다. 저와 함께 하나씩 살펴봅시다.입력 전 (기본값) 입력 필드에 값이 입력되기 전 상태는 어떤 모습일까요?이 예시를 보시면 기본 상태에서의 입력 필드는 사용자에게 내가 앞으로 어떤 것들을 입력해야 하는지에 대한 힌트를 줍니다.순서대로 하나씩 보시면,레이블: 어떤 정보를 입력해야 ..

국내외 UX/UI 가이드라인 or 디자인 시스템 참고 사이트

여러분은 UX/UI 디자인을 하시다가 문득, 이런 궁금증이 드신 적 없으신가요? "이렇게 하는 게 맞나? 다른 사람들은 어떻게 했지? 정답이 있는걸까?" UX/UI 디자인에서 '정답'이라고 콕집어 말할 수 있는 것은 없지만, 여러 전문가들이 모여 정리한 가이드라인은 분명히 존재합니다. 디자인을 하다 미로에 빠졌을 때, 벽에 부딪혔을 때 이러한 가이드라인은 북극성처럼 길을 잡을 수 있게 해줍니다. 또한 다른 부서(기획, 개발, QA 등) 사람들이 "이렇게 디자인한 근거가 뭐야?" 물어봤을 때 당당하게 대답할 수 있는 근거가 되어주기도 하죠. 이번 포스트에서는 여러분의 UX/UI 디자인에 도움을 줄 수 있는 국내외의 대표적인 UX/UI 가이드라인 웹사이트를 소개해 드리겠습니다.  1. 플랫폼 제공자 기반 가..

금융 상식을 쉽게 알려주는 카드 뉴스의 UX를 살펴보자

어려운 용어들은 고객들이 금융 상품에 접근할 때 큰 장벽이 되곤 합니다. 이에 대응하여 금융 업계에서는 어려운 개념을 쉽게 설명하는 콘텐츠를 만들기 시작했는데요, 토스의 , 카카오뱅크의 등이 대표적인 예시입니다. 오늘은 카드 뉴스 형태로 금융 지식을 전달하는 한화투자증권의 를 알아보겠습니다.투자에 도움을 주는 금융이나 산업 개념에 대해 일러스트로 표현하고 있는 것을 보실 수 있는데요, 오늘은 그 중에서도 ‘배당’을 다룬 카드 뉴스를 살펴보고 금융 UX 기획 시 참고할만한 부분을 꼽아봤습니다. 컬러톤 강조색(파랑) + 무채색(흑백) 딱 두가지 톤만 사용하여 중요한 부분에 주목이 잘 되는 깔끔한 구성이 돋보입니다. 질문과 답변 형식 질문을 먼저 던져 궁금증을 유발하고 하나씩 간단하게 답변하고 있습니다. 인포..

728x90
반응형