[필라이즈] 내가 자주 쓰는 서비스 뜯어보기

✅ 내가 자주 쓰는 서비스를 UXUI 관점에서 화면 분석해보자.

 

1️⃣ 서비스 선정하기

▶ 선정한 앱 : 필라이즈

▶ 분야 : 라이프 스타일

▶ 앱 설명 : 영양제, 식단, 혈당, 수분, 운동, 컨디션, 단식, 걸음수까지, 내 몸에 맞는 꼼꼼한 맞춤 피드백으로 건강하고 걱정없는 건강 관리를 도와드릴게요!

필라이즈 앱 화면 스크린샷

---

2️⃣ 앱 화면에서 분석할 요소를 찾아보고, 가이드에 맞게 분석하기

 

검색창(Search Fields)

 

▶ 가이드 링크 : https://m3.material.io/components/search/overview

Search – Material Design 3

 

▶ 가이드 정리 :

관련 / 제안 검색

최근 검색한 내용

• 제안된 키워드나 문구로된 검색어 표시 텍스트를 사용한다.
• 사용자는 텍스트 필드에 쿼리를 입력한 다음, 관련 또는 제안된 결과를 볼 수 있어야 한다.
• 사용자는 최근 검색한 내용을 볼 수 있어야 한다.

검색창 왼쪽 선행(검색) 아이콘

검색창 오른쪽 선택적 후행 아이콘

• 검색창 왼쪽에는 작동하지 않는 검색 아이콘이 들어가야 한다.
• 검색창 오른쪽에는 최대 두개의 액션 아이콘이 들어갈 수 있다. 이러한 작업은 추가 검색 모드(예: 음성 검색), 별도의 고급 작업(예: 현재 위치) 또는 오버플로 메뉴를 나타낼 수 있다.

 

▶ 필라이즈 검색창에 대한 나의 분석 :  

 

😄 좋은 점

• 최근 검색한 키워드를 보여줌으로써 재검색 시 용의하다.
• 텍스트 필드에서 입력을 진행할 때, 관련 키워드가 바로 반영되어 보여진다. 관련 키워드의 로딩 시간이 길지 않아 좋았다.

😞 아쉬운 점

• 검색창에 검색 아이콘이 비기능적인 요소가 아닌 버튼 기능을 하고 있다. 
• 검색 아이콘이 왼쪽 Leading Icon 영역에 위치하고 있지 않다.

---

네비게이션 바(Navigation Bar)

 

▶ 가이드 링크 : https://m3.material.io/components/navigation-bar/guidelines

Navigation bar – Material Design 3

 

▶ 가이드 정리 : 

1. 컨테이너 - 컨테이너는 각 목적지마다 하나씩 같은 너비의 열로 나뉜다. 각 목적지의 너비는 내비게이션 바의 너비를 목적지 수로 나누어 계산할 수 있다.
2. 아이콘 - 활성 상태일 경우 채워진 아이콘을 사용하고, 비활성 상태일 경우 윤곽 아이콘을 사용한다. 
3. 라벨 텍스트 - 아이콘이 명백한 의미가 없는 경우, 목적지에 대한 간단한 설명을 제공한다.
4. 활성 상태 표시 - 활성 상태 표시는 컨테이너와 충분한 대비를 가져야 한다.
5. 작은 배지 (선택) - 오른쪽 상단 모서리에 배지를 표시할 수 있다.
6. 큰 배지 (선택) - 배지에는 새 메시지 수와 같은 동적 정보가 포함될 수 있다.

⭕️ 네비게이션 바 사용에 좋은 예시	❌ 네비게이션 바 사용에 안 좋은 예시
❌ 네비게이션 바 사용에 안 좋은 예시	❌ 네비게이션 바 사용에 안 좋은 예시

 

• 사용자가 쉽게 접근할 수 있는 네비게이션 바 형태
• 5개 이상의 목적지를 사용하지 않는다. 서로 요소가 가깝게 배치되면 번역된 텍스트와 충돌이 일어날 수 있기 때문에 이럴경우 탭이나 네비게이션 서랍을 사용하는게 좋다.
• 텍스트 라벨 없이 아이콘을 사용하지 않는다.
• 3개 미만의 목적지를 사용할 경우에는 네비게이션 바 대신 탭을 사용한다.

 

▶ 필라이즈 네비게이션 바에 대한 나의 분석 : 

 

😄 좋은 점

• 활성 및 비활성 상태일 때 아이콘의 대비가 잘 되어 있다.

😞 아쉬운 점

• 아이콘과 라벨 텍스트에 대한 정보가 명확하지 않아서 목적지를 사용자가 예측하기가 어렵다.