Figma 인스타그램 클론 (2) (프로토타입 만들기)

어제에 이어서 인스타그램 프로토타입 UI/UX를 개선해보았다.

오늘 개선한 Figma 인스타그램 클론 프로토타입

위 프로토타입 프레젠테이션 바로가기

기존 버전의 UI/UX 분석 & 개선

1️⃣ UI 분석

• 사용중인 UI 디자인 패턴

기존: 무한스크롤을 비슷하게 구현해보았으나 프로토타입 안의 데이터가 한정돼 있어서 말그대로 무한의 스크롤은 아니었다.

개선 후:
무한스크롤 느낌을 내기 위해 둘러보기 페이지의 데이터를 늘리고,
기존 어플에는 없지만 캐러셀을 만들어서 이미지가 바뀌도록 했다.
아이디를 클릭하면 계정을 추가할 수 있는 모달창이 뜨고,
글추가 버튼을 클릭하면 추가할 수 있는 메뉴판 모달창이 뜨도록 만들었다.

• 컬럼 그리드 시스템

기존: 사용하지 않음

개선 후: 사용
아이폰X 기준 컬럼 4개, gutter 20으로 설정

2️⃣ UX 분석

• 피터 모빌의 UX 7요소

개선한 프로토타입을 바탕으로 평가

1. 유용성
   : 인스타그램 어플의 버튼들을 구현해놓았으나, 모든 버튼의 기능을 활성화 해놓진 않았다.

2. 사용성
   : 직관적인 아이콘을 사용해서 각각의 기능을 알기 쉽게 했다.

3. 매력성
   : 인스타그램은 나도 사용하고 많은 사람들에게 인기 있는 매력적인 어플이다.

4. 신뢰성
   : 개인정보 수집 동의를 구하고 동의한 사람들만 어플을 이용할 수 있다.

5. 접근성
   : 어플 내부에는 설명보다 유저들이 올린 사진과 동영상이 대부분을 차지해서 처음 이용할 때에도 어려움 없이 쉽게 이용할 수 있다.

6. 검색 가능성
   : 검색창 활성화, 하단 네비게이션바를 통해 원하는 정보를 쉽게 얻을 수 있게 했다. (검색창 기능구현은 하지 않음)

7. 가치성
   : 6가지 모든 요소를 고르게 고려하여 고객에게 가치를 제공한다.

• User flow

  개선한 프로토타입으로 처음 그려본 user flow

3️⃣ 사용성 평가

제이콥 닐슨의 10가지 사용성 평가 기준

개선한 프로토타입을 바탕으로 사용성 평가

1. 시스템 상태의 가시성
   : 점검중인 게시판에 들어가려 하면 점검 중이라는 사실을 안내했다.

2. 시스템과 현실 세계의 일치
   : 친숙한 단어, 직관적인 아이콘을 사용했다.

3. 사용자 제어 및 자유
   : (실수로 수행한 작업을 취소할 수 있도록 한다.)

4. 일관성 및 표준
   : 페이지의 공통적인 부분을 컴포넌트로 생성해서 모양과 위치를 일치시켰다.

5. 오류 방지
   : (오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지한다.)

6. 기억보다는 직관
   : (검색창에서 최근 검색 단어 목록을 확인할 수 있게 한다.)

7. 사용의 유연성과 효율성
   : 피드에 개별 맞춤 광고 게시글을 나오게 한다.

8. 미학적이고 미니멀한 디자인
   : 사용 빈도가 적은 메뉴를 필요할 때에만 모달 창으로 보이게 했다.

9. 오류의 인식, 진단, 복구를 지원
   : (사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇인지 정확하게 표시하고, 해결 방법을 제안해야 한다.)

10. 도움말 및 설명 문서
    : 메시지 페이지가 비어있는 경우 인스타그램에서 메시지를 보낼 수 있음을 안내했다.