SEB_21_UI/UX분석

[keyword]

UI 분석, UI 디자인 패턴, UX 분석, 피터 모빌의 UX 7요소, User flow, 사용성 평가, 제이콥 닐슨 10가지 사용성 평가

---

이번 과제는 클론을 진행했던 사이트의 UI/UX 분석이다.

클론을 진행한 사이트는 네모건축이다.

네모건축

---

📍UI 분석

사용중인 UI 디자인 패턴

• 탭(Tap) ➡️ Portfolio 주택 | 근린생활시설 부분, 네비게이션바에 적용되었다. 
• 드롭다운(Drop down) ➡️ 온라인 문의 연락 가능한 시간을 선택할 때 사용되었다.
• 캐러셀(Carousel) ➡️ 메인페이지의 메인이 되는 부분에 자동으로 넘어가고, 정지 기능이 있는 캐러셀로 되어있다.
• 페이지네이션(Pagination) ➡️ Portfolio 주택 페이지 하단에 페이지네이션이 적용되었다.
• GNB(Global Navigation Bar),LNB(Local Navigation Bar) ➡️ 페이지의 상단 부분 네비게이션바에 적용 되어있다.

반응형 웹페이지이다. 

3가지로 구분이 가며, 핸드폰, 태블릿, 데스크탑 화면으로 나눠 각 구분마다 화면이 변화하여, 사용자가 어느 기기를 사용하든 그에 맞는 최적화를 했다고 보인다. 

📍UX 분석

피터 모빌의 UX 7요소 충족

피터 모빌의 7요소

1. 유용성(Useful) 

사람과 공간을 위한 견고한 가치를 디자인합니다.

출처 : 네모건축(http://4mo.co.kr/)

네모건축의 메인 페이지에 가면 최상단에 있는 문장을 가져와봤다. 

네모건축은 설계, 디자인이 주 목적임을 알 수 있다.

포트폴리오와 의뢰할 수 있는 페이지 등 사용자에게 설계, 디자인에 대한 정보를 충분히 주고 있으므로 유용하다 볼 수 있다.

 

2. 사용성(Usable)

생소한 UI 디자인을 사용하지 않은점, 건축 디자인을 모르는 사람도 충분히 접근할 수 있게 사진자료를 다양하게 사용한 점에서 사용성 부분도 충족시켰다.

 

3. 매력성(Desirable)

로고가 집모양 등 사이트 자체의 정체성을 잘 드러내고 있으며, 사진의 배치와 구도 등이 매력적으로 다가온다.

 

4. 신뢰성(Credible)

신뢰성을 알아볼 수 있는 자료가 없다. // 콘솔로 코드 확인 시, 메뉴얼 페이지에서 아직 테스트 중인 페이지임을 알 수 있었다.

 

5. 접근성(Accessible)

크롬, 사파리로 접근 시 글자 키우는 기능이 가능하다. 

 

6. 검색 가능성(Findable)

검색 창은 없으나 아직 새로 만들거나 리뉴얼한 페이지라 콘텐츠가 적어 직관적으로 보이게 배치 되었다.

 

7. 가치성(Valuable)

홈페이지를 봤을 때 모든 요소를 고르게 설계한 느낌이 든다. 특히 유용성과 매력성이 높은 웹페이지라는 생각이 들어 웹페이지 구상 시 참고하고 싶은 웹페이지였다. 다만 콘텐츠가 늘어감에 따라 검색 창등의 검색 가능성 부분을 보완, 테스트가 끝난후에는 테스트 코드(주석)를 사용자가 알아볼 수 없게 숨기고, 메뉴얼 부분의 테스트 콘텐츠 숨김을 한다면 좀 더 높은 가치성과 신뢰도를 가지는 웹사이트가 될 것 같다. 추가로 기능적인 부분 보완은 메인 페이지 상단의 캐러셀의 이전, 다음 버튼이 있어서 사용자가 원하는 이미지에 바로 접근할 수 있는 기능이 있으면 좋겠다.

 

User flow 그려보기

네모 건축 웹페이지의 User flow

📍UI/UX 사용성 평가

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

 

1. 시스템 상테의 가시성(Visibility of system status) : 예약 페이지에서 어떤 시간이 선택 가능한지, 사용자가 선택한 시간은 무엇인지 잘 보여주고 있다. 

2. 시스템과 현실 세계의 일치(Match between system and the real world) : 건설과 관련된 어려운 용어가 많음에도 불구하고 웹페이지에는 전문용어가 사용되지 않은 점, 네모건축에서는 영어 사용을 최소한으로 하고 최대한 한글을 사용하였다는 것 특히 네비게이션바에서도 한글을 사용하여 영어에 친숙하지 않은 사용자들을 배려했다는 느낌이 들었다. 개인적으로 추구하고 싶은 부분이라 더 멋있게 느껴졌다.

3. 사용자 제어 및 자유(User control and freedom) : 사용자가 실수 했을 시 돌이킬 수 있는 방법은 예약문의 실수 했을 때 수정이 가능한지 알아보면 될 것 같은데 그러면 문의를 해야한다... 만약 안 되면 피해주게 되는 것이니까 확인을 못한다.

4. 일관성 및 표준(Consistency and standards) : 익숙한 UI 디자인 패턴을 사용하였고, 인터페이스 정보 제공에 일관성이 있었다.

5. 오류방지(Error prevention) : 사용자가  실수할만한 상황에 방지 기능은 문의하기 삭제 등을 눌렀을 때 확인창이 뜨는지 확인하면 될 것 같지만 그러면 문의를 해야한다... 만약 안 되면 피해주게 되는 것이니까 확인을 못한다.

6. 기억보다는 직관(Recognition rather than recall) : 검색창이 없다. 이러한 기능을 추가하고 싶다면 예약하기에 문의를 했다면 다음에 예약문의 하는 창을 다시 입력하게 됐을 때 기억하게 하는 것도 좋은 방법일 듯 싶다.

7. 사용의 유연성과 효율성(Flexibility and efficiency of use) :  개인 커스텀 단축키등은 없었으나 넓게 보면 예약이 필요한 사람과, 건축 디자인 자료, 네모건축에서 만든 작품이 궁금한 사람 모두에게 정보를 모두 제공하고 있다.

8. 미학적이고 미니멀한 디자인(Aesthetic and minimalist design) : 단순하고, 알아보기 쉬우며, 불필요한 정보가 없다.

9. 오류의 인식, 진단, 복구를 지원(Help users recognize, diagnose, and recover from errors) : 일단 예약자명 등등 오타를 냈을 때 뜨는 문구는 없었다. 하지만 문의하기 버튼을 눌렀을 때 기능을 설정 해 뒀다면 충족시켰다 볼 수 있다. 하지만 확인을 못하므로 이것도 넘겼다.

10. 도우말 및 설명 문서(Help and documentation) : 페이지 상으로 도움말 및 설명 문서가 필요 할만한 곳이 없었다. 추가 설명이 없게 만드는 것도 매우 좋은 방법이라 하였으므로 보완할 점이 보이지는 않는다.

 

---

네모건축은 기능 & 심미적인 UI가 장점인 웹페이지 같다. 심미적인 부분과 기능적인 부분 한쪽에만 기울지 않고 웹페이지를 만드는 것이 나에게는 어렵게 다가왔는데 이렇게 기능성과 심미성 둘 다 균일하게 만들어진 좋은 사이트를 발견하고 분석하면서 내가 미래에 만들 웹페이지의 방향성에 대해 생각해보는 좋은 시간이었다.

네모건축의 웹사이트에서 가장 인상적인 부분은 웹페이지에 영어와 한글 사용 부분이었다. 예전에 인터넷에서 안내소가 영어로만 쓰여있어서 영어에 익숙하지 않으신 분이 헤맬 것 같다는 글을 본 적 있었는데 그 안내소를 설계한 사람에게는 당연한 것이 사용자에게는 당연한게 아닐 경우가 있다는 것을 깨닫게 됐다. 요즘 브랜드 이미지에 맞는 감성때문에 영어를 혼용하면서 한글을 최소화하거나 영어만 사용하는 경우가 많지 않는가? 나도 영어가 더  잘어울려서 영어로만 페이지를 꾸며본적도 있어서 더욱 크게 다가왔던 글이었다.  이 글을 접한 뒤 나는 심미적인 이유로 사용자에게 불편감을 준다면 심미성을 포기하고 기능성을 잡아야 하는 것일까에 대한 고민을 했었다. 답은 없겠지만 내가 그 때 내린 결론은 기능성을 잡아야 한다였다. 아무리 아름답고, 편리해보여도 모두에게 접근이 쉬운 기능이 아니라면 얻게되는 정보의 차이가 커지기 때문이다.

그런데 네모건축의 사이트를 보고 둘 다 잡을 수 있는거구나를 느꼈다. 나도 이런 감각을 키우기 위해 노력해야겠다. 또 한쪽만 선택할 수 있다라는 틀을 깨게 만들어준 사이트라 분석하면서 많이 배우고, 즐거웠다.

 

요약 : 네모건축 - 배려심 깊은 멋진 사이트