section3/Unit2/ [사용자 친화 웹] UI/UX(10/26)

블로깅 주제

• UI/UX

---

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

• 피그마를 처음 사용해보았다. 튜토리얼 영상이 훅훅 지나가서 따라하느라 애를 먹었다 ㅋㅋㅋ 결국 다시 한번 해보고 과제에 들어갔다... 제대로 숙지 안하고 가면 페어분께 폐끼칠 것 같다는 생각에 30분 내로 다시 만드느라 진짜 손가락이 빠지는 줄 알았다. 어렵긴 했지만 그래도 재밌었다! 코딩을 안했던 과제라 좀 낯설긴했지만? :) 

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

• 피그마, UI/UX 분석

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

- 과제 1 : Figma 클론

나와 페어 분은 Figma의 plugIn인 무료 이미지 공개 사이트, 'Unsplash' 페이지를 클론했다.

https://www.figma.com/file/AJAW42TVTJyq9R5i2CElCN/Unsplash?node-id=0%3A1 

Figma

 

- 과제 2: UI/UX 분석

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

1. 유용성 => 무료 이미지 제공 페이지인 만큼 고퀄리티의 다양한 이미지들을 제공하고 있어 유용했다.
2. 사용성 => 카테고리별로 이미지를 나눠 원하는 이미지를 쉽고 빠르게 찾을 수 있어 사용성이 좋았다.
3. 매력성 => 카테고리도 세분화되어 있을 뿐 아니라 제공하는 이미지의 퀄리티가 매우 좋아서 매력있었다.
4. 신뢰성 => 이미지가 다양했고, 화질이 좋았기 때문에 충분히 신뢰성이 있었다.
5. 접근성 => 이미지에 커서를 올리면 돋보기 모양이 뜨고, 클릭하면 이미지가 확대되어 보여서 접근성이 좋았다.
6. 검색가능성 => 원하는 이미지에 맞는 단어를 검색하면 그에 맞는 이미지들이 나와서 편리했다.
7. 가치성 => 다양하고 화질 좋은 이미지들을 무료로 제공하여 충분히 가치는 페이지라고 할 수 있겠다.

 

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

1. 시스템 상태의 가시성 => 이미지 다운로드에 대한 피드백이 적당히 이루어졌다.
2. 시스템과 현실 세계의 일치 => 이미지의 카테고리 분류에 내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용했다. 
3. 사용자 제어 및 자유 => 이미지를 잘 못 누르면 'x'버튼을 통해 뒤로 갈 수 있었다.
4. 일관성 및 표준 => 디자인패턴이 충분히 일관적이였고, 친숙한 UI를 사용하였다.
5. 오류방지 => 오류가 발생할 만한 상황이 없었던 것 같다.
6. 기억보다는 직관 => 검색어가 자동 저장되어 이후에도 볼 수 있어 편리했다.
7. 사용의 유연성과 효율성 => 이미지를 검색하고 다운로드하는 간단한 인터렉션만 필요해, 전문가와 초보자에게 개별 맞춤 기능을 제공할 필요성이 없었던 것 같다.
8. 미학적이고 미니멀한 디자인 => 사용 빈도가 적은 메뉴를 필요할 때에만 볼 수 있게 숨겨놓게 되어 디자인이 미니멀했다고 볼 수 있다.
9. 오류의 인식, 진단, 복구를 지원 => 검색창에 한글로 'ㅇㄹㅁㅇ' 을 친 후 검색했을 때 제대로 된 단어를 검색해달라는 기능은 없어 아쉬웠다.
10. 도움말 및 설명 문서 => 도움말 또는 설명 문서와 같은 기능은 없었다.