#04 피그마 실습 및 분석

LastCarol·2022년 6월 29일

인스타그램 피그마로 클론 해보기

피그마 링크: https://www.figma.com/file/IUTJmrSa8TuIwgZouZ6nJH/SEB-39-%EC%A7%84%ED%98%84%EB%8D%95%2C%EC%9D%B4%EB%8F%84%ED%98%84

UI 분석

1. UI 디자인 패턴 : 캐러셀 과 탭

2. 칼럼 그리드 시스템 사용 여부 = X

UX 분석

1. 피터 모빌의 UX 요소 충족 여부

유용성

댓글기능과 사진 게시 기능을 통해 소셜네트워크라는 기능을 충족했기 때문에 적합하다고 볼 수 있다.

사용성

모바일 UI로 직관적이고 접근성이 좋음 그렇기 때문에 적합하다고 볼 수 있다.

매력성

사용자의 경험을 아직 판단할 수 없기에 매력성을 알 수 없음

신뢰성

과장된 내용과 결함이 없기 때문에 신뢰성이 적합함

접근성

돋보기기능이나 여러사용자에 대한 ux는 갖추지 못하므로 적합하지 못함

검색 가능성

피그마 프로토타입 단계이므로 알 수 없음

가치성

서비스 단계가 아니므로 가치성을 판단할 수 없음

2. user flow 그려보기

사용성 평가

제이콥 닐슨의 10가지 사용성 평가 기준 충족 여부

1. 시스템 상태의 가시성

프로토타입 단계에서는 알 수 없음

2. 시스템과 현실 세계의 일치

전문용어가 아닌 사용자에게 친숙한 언어를 제공하므로 일치한다고 볼 수 있음

3. 사용자 제어 및 자유

뒤로가기 버튼을 통해 사용자에게 제어 및 자유를 제공하므로 적합하다고 볼 수 있음

4. 일관성 및 표준

컴포넌트 위주로 구성되어 일관적인 캐러실 및 탭 등을 통한 ui를 제공하므로 적합하다고 볼 수 있음

5. 오류 방지

배포 단계전 테스트를 통해 오류 방지 ui를 개선해야 할 것으로 보임

6. 기억보다는 직관

검색목록을 제공하여 사용자에게 기억해야한다는 부담을 줄여주기 때문에 적합하다고 볼 수 있음

7. 사용의 유연성과 효율성

비즈니스 모드와 일반모드를 제공하여 개별 맞춤 기능을 제공하므로 적합하다고 볼 수 있음

8. 미학적이고 미니멀한 디자인

불필요한 정보가 없고 사용자들이 필요한 기능들을 위주로 구성되었으므로 적합하다고 볼 수 있음

9. 오류의 인식, 진단, 복구를 지원

help 고객지원 탭을 통해 사용자에게 오류 지원 진단 하므로 적합하다고 볼 수 있다.

10. 도움말 및 설명 문서

도움말 탭을 제공하여 다양한 고객지원 UI를 제공하므로 적합하다고 볼 수 있다.

profile
프론트엔드 엔지니어가 되기 위해 노력합니다.

0개의 댓글