사용자 중심 서비스 만들기21 금융/핀테크 앱의 거래내역 UX/UI를 만들어보자 우리는 일상 속에서 은행, 카드, 핀테크 앱을 사용하며 금융 거래를 합니다. 그리고 거래 내역을 통해서 다양한 금융 활동을 추적하고 관리하고 있지요. 이러한 거래 내역의 UI는 어떻게 구성하면 좋을까요? 오늘은 은행 앱의 거래 내역 제공 현황을 살펴보고, 거래 내역, 상세 화면을 새롭게 구성해 보도록 하겠습니다. 거래 내역 & 상세 내역 사용자가 과거 거래 이력에서 확인하고자 하는 것은 다양한 거래 건의 날짜, 입금/출금처, 금액, 거래 유형 등의 기본적인 정보입니다. 따라서 [거래 내역] 페이지는 이러한 주요 정보를 명확하고 이해하기 쉬운 형태로 제공해야 합니다. 이외에 더 디테일한 정보는 각 거래 내역을 선택하여 진입하는 [상세 내역] 페이지에서 확인할할 수 있습니다. 거래 내역의 구성 은행 앱(카카.. 2024. 4. 21. 모바일앱 에러 메시지의 종류와 예시 문구 모바일 앱 UX를 만들면서 우리가 종종 간과할 수 있는 부분 중 하나가 바로 에러 메시지입니다. 이 메시지들은 사용자가 앱을 사용하는 동안 발생할 수 있는 다양한 문제 상황에 대응하는 방법이며, 에러 메시지를 정확하고 촘촘하게 정의하는 것은 전반적인 사용자 경험(UX)에 큰 영향을 미칩니다. 오늘은 UX 기획자로서 알아야 할 주요 에러 메시지 유형과 예시 문구를 정리해 보겠습니다. 주요 에러 메시지 다음은 에러 메시지가 발생하는 상황과 예시 문구를 정리한 표입니다.종류상황예시 문구네트워크 에러사용자의 인터넷 연결이 불안정하거나 끊겨 거래 요청이 서버에 도달하지 못할 때인터넷 연결을 확인해주세요서버 에러서버 오버로드, 유지보수, 내부 오류 등으로 인해 서비스가 일시적으로 사용 불가능한 상황서비스가 일시적으.. 2024. 3. 25. 벤치마킹과 레퍼런스의 차이를 아시나요? 서비스를 기획할 때, UX를 디자인할 때, 우리는 종종 '벤치마킹'과 '레퍼런스'라는 용어를 사용합니다. 여러분은 이 두 용어의 차이를 설명할 수 있으신가요? 저는 일할 때 ‘벤치마킹’과 ‘레퍼런스’라는 용어를 마구 혼용해서 사용하곤 했습니다. 그러다 문득 두 개념의 차이점이 뭘까 궁금해졌습니다. 자세히 뜯어보면 두 개념은 목적과 접근 방식에서 분명한 차이가 있습니다. 이번 포스트에서는 ‘벤치마킹’과 ‘레퍼런스’의 개념을 명확히 하고, 예시를 통해 각각 어떤 경우에 사용할 수 있는지 구체적으로 알아보겠습니다. 벤치마킹과 레퍼런스의 개념 먼저, 벤치마킹에 대해 알아보겠습니다. 벤치마킹 목적조직, 제품, 프로세스 등을 업계 표준이나 경쟁사와 비교하여 현재 상황을 평가하고 및 개선 전략 세우기 접근 방식체계적.. 2024. 3. 19. UX/UI 스터디 : 이용 기간에 따라 콘텐츠 접근 제한 (feat. 구독 서비스) 안녕하세요? 전천후 PM, 나를 위한 일하기입니다.오늘은 주로 구독 서비스에서 사용하는 이용 기간 제한 UX를 만드는 방법을 살펴보도록 하겠습니다. 많은 콘텐츠 플랫폼에서는 '이용 기간'에 따라 콘텐츠를 제한적으로 제공하고 있습니다. 예시멜론, 스포티파이 등 음원 스트리밍 사이트 유튜브, 디즈니플러스, 넷플릭스 등 미디어 플랫폼밀리의 서재, 윌라 등 e-book, 오디오북 플랫폼인프런, 클래스 101 등 강의 제공 플랫폼 서비스 이용 기간 내에는 거의 자유롭게 콘텐츠를 사용할 수 있는 반면 이용 기간이 끝나면 접근이 제한되죠. 이렇게 이용 기간에 따라 접근을 제한을 두는 기능은 어떻게 정의하면 좋을까요? 이용 기간의 구분 서비스 이용 기간을 크게 구분해 보면 서비스 이용 기간(노란색)과 그 전, 후의.. 2023. 7. 20. 사용자 등급에 따라 차등화된 서비스를 제공하는 UX 사용자는 모두 동등한가? 아닙니다. 많은 서비스에서 사용자의 ‘등급’을 구분하여 각 등급별 차등화된 서비스를 제공합니다. ex. 쇼핑몰의 브론즈, 실버, 골드, 플래티넘 등급 그리고 이렇게 구분된 등급에 따라 쿠폰이나 할인율을 차등적으로 지급합니다. 사용자의 등급을 구분하면 더 높은 등급으로 올라가고자 하는 욕구를 자극하여 더 활발한 활동이나 구매를 유도할 수 있습니다. 한편 등급별로 너무 차별적인(?) 대우를 하는 경우 신규 사용자의 사용 의지를 꺾어버릴 수 있으니, 신규 사용자에 대한 혜택도 별도로 마련해 두도록 합니다.사용자 등급 구분 기준 사용자의 등급을 결정하는 조건은, '강화하고자 하는 행동'을 중심으로 구성할 수 있습니다. 사용자가 많이 해줬으면 하는 행동을 기준으로 구분하는 것이지요. 가입.. 2023. 6. 20. 콘텐츠 참여도를 높이는 댓글 UI 만들기 요즘 대부분의 온라인 콘텐츠에는 댓글 기능이 제공되곤 하죠. 뉴스에도 댓글, 블로그에도 댓글, 유튜브에도 댓글! 댓글 기능을 제공하면, 사용자의 적극적인 참여를 이끌어 낼 수 있고활발한 논의, 피드백 등 풍부한 2차 콘텐츠가 만들어져 해당 콘텐츠를 소비하는 사용자의 경험(UX)를 더욱 풍성하게 만들 수 있습니다. 과연 이런 댓글 UI를 만들려면 어떤 것들을 정의해야 할까요? 영역 구분댓글 영역은 보통 컨텐츠 영역 하단에 제공합니다. 댓글 영역은 다시 크게 1. 입력 영역과 2. 조회 영역으로 나뉩니다. 그러면 각 항목별 구성 요소들을 더 자세히 알아봅시다.1. 입력 영역1. 작성자 정보사용자 아이콘ID or 닉네임 2. 입력 필드입력 가능한 문자에 대한 정의 필요필요 시 이모지 입력 기능도 제공 가능글자.. 2023. 6. 14. 모바일앱 필수/선택 권한 허용 시나리오를 만들어보자 모바일앱 서비스를 기획하는 분이시라면 누구나 마주치는 숙제, 권한! OS별로 권한의 종류도 다르고, 정책도 달라 한마디로 똑 떨어지게 정리하기 어렵습니다. 오늘은 이런 권한 수집 방법 시나리오를 최대한 깔끔하게 정리해 보도록 하겠습니다. 1. 수집할 권한 정하기OS에서 제공하는 권한 중 우리 앱에서 수집해야 할 권한이 무엇인지 정합니다. 그리고 앱을 이용하기 위해 그 권한을 필수로 수집해야 하는지, 수집하지 않고도 이용할 수 있게 하되 특정 기능 사용 시 수집할지도 정합니다. 권한 목록에는 다음과 같은 것들이 있습니다.Calendar (캘린더)Camera (카메라)Contacts (연락처)Location (위치 정보)Microphone (마이크/녹음)Bluetooth (블루투스 페어링)Phone (전화 .. 2023. 4. 22. 스마트워치 UX/UI를 기획할 때 고려해야 할 것 애플 워치를 필두로 보편화된 또 다른 스마트 디바이스, 스마트워치! 요즘 다양한 브랜드에서 양질의 제품을 내놓으며 경쟁하고 있는데요, 기획자로서 저는 스마트워치의 UX/UI는 어떻게 만들어야 할까 생각해 보았습니다. 스마트워치의 특징 1. 작은 화면 일단 스마트워치는 스마트폰에 비해 현저히 작은 화면을 가졌습니다. 따라서 조작이 쉽지 않습니다. 특히 연령대가 높아질 수록 스마트워치로 세밀한 작업을 수행하기가 어려워집니다. 이에 스마트워치의 역할은 복잡한 작업을 수행하는 것보다는 간단한 정보를 보여주는 것, 아주 간단한 작업을 수행하는 것에 한정됩니다. 2. 다양한 센서 대신 스마트워치는 사용자의 손목에 착 붙어서 다양한 센서로 생체 정보를 수집할 수 있습니다. 대표적으로 걸음수, GPS, 심박수, 혈압,.. 2023. 4. 15. 챗GPT와 함께 스탬프 쿠폰을 만들어보자 (with html, css, java script) 이제 코딩에 ㅋ자도 잘 모르는 사람도 10분 안에 웹페이지를 만들 수 있습니다. chatGPT에 아이디어를 적고 코드를 달라고 하면 html, css, java 코드를 뚝딱 만들어주기 떄문입니다. 오늘은 chatGPT와 함께 스탬프 쿠폰 웹페이지를 한번 만들어 보겠습니다. (도장 10개 찍으면 커피 1잔 무료!) 프롬프트I want to make digital punch card web page. if user get 10 punches, he get 1 free post card. the punch card has 10 holes and 1 hole means one punch. can you write me html, css, javascript code ? 답변그럼 이런 식으로 코드를 작성해 줍니다.. 2023. 4. 9. 이전 1 2 다음 728x90 반응형
