3시 방향부터 시작되는 구조였으나 12시 방향부터 시계방향으로 채워지는 원형 바가 일반적이므로 수정.
할 일
할 일 텍스트 클릭
원래 아무일도 일어나지 않음 → 노트가 있다면 노트조회, 없다면 노트 생성(안내 모달 이후)로 이동
아이콘 색상
아이콘이 너무 흐릿해서 존재감이 없다.
주황색 - 노트
파란색 - 파일, 링크 관련
수정/삭제
데스크탑
더보기(케밥) 아이콘 hover 하지 않아도 표시되도록 변경
노트 아이콘을 클릭하기 위해 호버했지만 케밥 아이콘이 오른쪽에서 새로 등장하며 다른 아이콘들이 전부 왼쪽으로 한칸씩 밀려 처음 유저가 의도했던것과 다른 것에 마우스 커서가 있는 경험을 덜고자 함.
태블릿
데스크탑과 동일
모바일
Drawer(바텀 시트) 추가
모바일에서도 물론 아이콘 클릭이 가능하나 손가락으로 작은 아이콘을 누르는 고도의 집중력을 요함 → 사용자 혈압 상승
할일 추가 & 삭제 모달
버튼 항상 활성화로 변경
모든 입력필드가 유효할 때만 활성화 → 입력필드 유효성 검사는 입력필드에 나왔을때 or 버튼을 눌렀을 때 검사함 → 이용자가 처음 들어오면 어떤 필드가 필수인지 모름→ 버튼 비활성화를 보면 시스템 자체가 닫힌건지, 입력필드가 유효하지 않아서 활성화가 안된건지 모름 → 사용자 혈압 상승
유효성 검사 시기를 처음 보여주는 것도 문제. 모달 입장 직후 바로 빨간 글씨 화면을 이용자에게 제공 → 사용자 불쾌감 상승
목표
수정
구체적인 디자인이 없어 수정 버튼 클릭시 목표 텍스트 영역을 input으로 변경해 그자리에서 수정하도록 코드를 작성함
할일 수정은 모달을 띄워 수정하는 방식이기에 할일 수정과 목표 수정의 ux을 통일해보려 했으나, 할 일 수정은 isdone / title / file / link / goal 등 여러개를 수정할 수 있는 반면 목표는 title만 수정할 수 있기에 title만을 위해 모달을 띄우는 것은 불필요한 depth를 늘리는 것이라 판단. 특히 모바일에서 텍스트 수정만을 위한 모달로 뎁스가 늘어나면 불편하고 어색할것으로 생각되어 기존에 title이 적혀있던 위치에서 수정할 수 있도록 변경함.
랜딩 페이지
기획에 없던 랜딩페이지를 자체적으로 기획/디자인 함
서비스 구조 자체가 로그인하지 않으면 아무것도 확인 할 수 없기에 미리 이 서비스를 잘 알려주어야 유저를 모으기 쉽다고 생각하여 제작
서비스 안내 문구와 실제 사용 예시를 캡쳐하여 로그인 하지 않고도 서비스를 예상하게 할 예정
회원가입
유효성 검사 타이밍
이메일만 디바운스를 적용해 타이핑 이후 몇초후에 사용 가능한 이메일인지 검사
다른 항목들은 confirm을 누르거나 포커스가 나갔을 때 검사
차별이유: 이메일은 유저가 중복이 있는지 바로바로 확인할 수 있게 편의성을 증진, 다른 항목들은 오히려 유저를 닦달하는 거 같아 포커스아웃or confirm 때만 검사