UI, UX

UI/UX 개념

UI(User Interface, 사용자 인터페이스)

• 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다.
• GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다. GUI의 예시는 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있다. 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다. 따라서 앞으로 말하는 UI는 이 GUI를 의미한다고 생각해도 된다.

UX(User Experience, 사용자 경험)

• 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다. 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험이라고 할 수 있다.

=>UX는 UI를 포함한다. 하지만 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.보통은 나쁜 UI가 나쁜 UX를 유발하는 경우가 많지만, UI가 좋다 하더라도 UX가 좋지 않은 경우가 있다. 보기에는 좋아도 사용하기에 불편하거나, 제대로 기능하지 않는 경우가 이에 해당한다. 보기 좋은 계산기가 있더라도 계산이 잘 안된다면 그것은 사용자 경험을 현저하게 떨어뜨린다.  UI가 보기 좋더라도 UX가 안 좋은 결과물이 나올 수 있다

 

좋은 UX를 만드는 요소

 

1. 유용성(Useful) : 사용 가능한가?

유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소

 =>목적에 맞는 기능이 들어있는가 + 비실용적이라도 추가적인 기능을 제공하는가(디자인)

     2. 사용성(Usable) : 사용하기 쉬운가?

사용성은 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소
 
=>기능이 좋더라도 안전성과 편의성이 없으면 ux가 좋지않음

3. 매력성(Desirable) : 매력적인가?

매력성은 말 그대로 제품이 사용자들에게 매력적인가에 대한 요소

=>단순히 디자인이 보기에 좋은지부터 시작해서, 이미지, 브랜딩 등의 여러 요소들이 사용자에게 긍정적인 감정을 불러일으킬 수 있는지, 사용자들이 해당 제품이나 서비스를 이용하고 싶어 하는지가 중요합니다.

4. 신뢰성(Credible) : 신뢰할 수 있는가?

신뢰성은 사용자가 제품이나 서비스를 믿고 사용할 수 있는가에 관한 요소

=>사용자가 상품을 신뢰할 수 있는가입니다 신뢰성을 구축하는 것이 장기적으론 중요한 요소입니다

5. 접근성(Accessible) : 접근하기 쉬운가?

접근성은 나이, 성별, 장애 여부를 떠나서 누구든지 제품이나 서비스에 접근할 수 있는가에 관한 요소

=>시력이 좋지 않은 고연령자 사용자들을 위한 글자 키우기나 돋보기 기능, 혹은 시각 장애인을 위한 음성 안내 기능 등 누구라도 비슷한 수준의 정보를 얻을 수 있도록 장치를 구비해 놓는 노력 등이 접근성을 높여줍니다.

6. 검색 가능성(Findable) : 찾기 쉬운가?

검색 가능성은 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가에 관한 요소

7. 가치성(Valuable) : 가치를 제공하는가?

가치성은 위에서 언급된 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가에 관한 요소

 제이콥 닐슨의 10가지 휴리스틱 원칙

1. 시스템 상태의 시각화 (Visibility of system status)

 시스템은 적절한 시간과 피드백으로 사용자에게 진행사항을 알려줘야 한다.(로딩바 등)

 

2. 실세계 일치 (Match between system system and the real world)

 전문용어는 자제한다. 사용자에게 친숙한 단어로 말한다.

 

3. 사용자 제어와 자유도 (User control & freedom) 
사용자는 자신의 실수를 금세 복구할 수 있어야 한다. 대표적으로 '이전'으로 돌아 갈 수 있도록 도와주는 명령어 'control+z'와 같은 비상구가 있어야 한다.

 

4. 일관성과 표준 (Consistency and Standards)
인터페이스의 일관성(내부/외부)을 제공하고 표준화 시켜야 한다.

 

5. 에러 방지 (Error Prevention)
오류가 발생하기 쉬운 조건을 제거하거나, 오류를 확인하고 사용자가 작업을 수행하기 전에 확인 옵션을 제시하세요

 

6. 기억보다 직관(인식) (Recognition rather than recall)

사용자가 별도 학습 또는 기억 없이 해당 기능에 대해 쉽게 인식할 수 있어야 한다

 

7. 사용의 융통성과 효율성 (Flexibility and efficiency of use)
자주 쓰는 메뉴 모음이나 순서 변경 같이, 숙련된 사용자를 도울 수 있는 방법을 연구해야 한다

 

8. 간결한 디자인 (Aesthetic and minimalist design)
불필요한 요소가 사용자에게 필요한 정보로부터 사용자의 주의를 분산시키지 않도록 합니다

 

9. 명확한 에러표시 (Help users recognize, diagnose, recover frome errors)
쉽고 명확한 언어로 에러 표시를 해야 한다. 동시에 빠른 해결책이 필요하다

 

10. 도움말과 문서화 (Help and documentation)

사용자가 어려움에 직면할 때 해당 기능에 대한 설명을 쉽고 빠르게 찾아볼 수 있어야 한다.도움말 문서를 쉽게 검색할 수 있으며 사용자 문서를 필요로 하는 시점에 상황별로 제시한다.