•인터페이스(Interface):서로 다른 두 시스템이나 장치 또는 소프트웨어 등을 이어주는 접속 장치
•인터페이스는 연결하는 대상에 따라 크게 하드웨어 인터페이스, 소프트웨어 인터페이스, 사용자 인터페이스로 구분
•UI : User interface (사람과 기계의 연결 : Man-Machine Interface)
•HCI : HumanComputer Interface
2. UI의 영역 확장
•시대적 변화에 따라 UI와 UX의 개념과 영역은 점차 확장되거나 변형되고 있다.
•User Interface -> User eXperience
•사용자와 상호작용하는 하드웨어 및 소프트웨어의 변화에 따른 UI변경
UI의 확장
3. UI의 종류
1.CLI(Command Line Interface):
사용자가 인터페이스에 단일 명령을 입력하면 컴퓨터가 수신하고 같은 방식으로 프롬프트에 응답하는 구조.
2.GUI (Graphic User Interface):
아이콘이나 그림과 같은 그래픽 요소를 배치하고, 마우스 등의 포인팅 장치를 이용해 조작한다.
- Metaphors 메타포: 은유에 의존
3.NUI (Natural User Interface):
사람과 컴퓨터의 상호작용을 위한 시스템으로, 사용자의 일상적 행동과 관련된 직관적인 동작을 통해 작동.
•멀티터치, 동작 인식, 음성 인식, 뇌파 인식, 시선 추적, 표정 인식, 생체 인식 등
•Sensor를 활용한 UI
•Skinput. EyeTap…
•NUI는 상호작용을 위한 중간 장치에 의존하지만, 고급 NUI는 눈에 잘 띄지 않아 보이지 않는 것처럼 느껴질 수 있다.
•제스처 인식 시스템은 사용자의 동작을 추적해 그 동작을 지침으로 변환한다.
•VUI : Voice User interface -
시스템은 사용자가 말한 단어와 문장을 식별하고 기계가 읽을 수 있는 형식으로 변환한 후 명령을 수행한다.
4.OUI : NUI에 새로운 요소가 추가
•OUI(Organic User Interface): 모든 사물을 입출력 장치로 변환할 수 있고, 인터페이스의 모양이나 상태도 자유롭게 변형할 수 있음
NUI는자연스러운 상호작용을 중점으로 두는 반면,OUI는실제 물리적 세계를 디지털 세계와 더 가깝게 연결하려는 노력
기능이 형태를 좌우한다.
UI 의도성 (Intend)
UI(User Interface)에서 "의도성(intend)"은 사용자 인터페이스 디자인에서 사용자가 특정 행동을 유도하거나 의도된 경로로 사용하게끔 디자인 요소를 설계하는 것을 의미한다. 이는 사용자가 직관적으로 시스템을 사용하고, 특정 작업을 수행하도록 돕기 위한 중요한 개념이다.
의도성(intend)의 주요 특징:
명확한 목적: UI는 사용자가 시스템을 어떻게 사용하길 원하는지를 분명하게 전달해야 한다. 예를 들어, 버튼의 크기나 색상을 통해 클릭을 유도하거나, 단계적인 안내를 통해 사용자가 다음에 무엇을 해야 하는지 알 수 있도록 한다.
유도성: 사용자가 자연스럽게 인터페이스를 통해 특정 작업을 수행하도록 유도하는 디자인이 필요하다. 예를 들어, 시각적 계층 구조를 활용해 중요한 정보를 눈에 띄게 배치하거나, 사용자의 시선이 자연스럽게 흐르도록 배치하여 원하는 행동을 유도한다.
피드백 제공: 사용자가 특정 행동을 수행했을 때, 그에 대한 명확한 피드백을 제공하여 다음 행동을 결정하는 데 도움을 준다. 이는 사용자에게 시스템이 정상적으로 작동하고 있음을 알리고, 계속해서 올바른 경로로 진행할 수 있도록 돕는다.
사용자 경험 최적화: UI의 의도성은 단순히 사용자가 시스템을 사용하는 데 어려움을 겪지 않도록 하는 것을 넘어, 사용자가 즐겁고 만족스러운 경험을 할 수 있도록 돕는 것을 목표로 한다. 이를 위해 다양한 요소들이 복합적으로 작용해 사용자가 자연스럽게 시스템을 탐색하고 이용할 수 있도록 설계한다.
결국, UI에서 의도성은 사용자가 시스템을 사용하는 과정에서 혼란을 최소화하고, 원활하게 목표를 달성할 수 있도록 돕는 핵심적인 디자인 원칙 중 하나이다.
4. UI 평가 기준
5. 휴리스틱 평가
휴리스틱을 간단하게 정의한다면 ‘어림짐작’ 또는 ‘대충 내린 결정’ 정도
인간은 합리적이지 않고 선입견을 가진 존재
대표성 휴리스틱 : 일부만으로 전체를 판단하는 것 - 따라서 디자이너는 인터페이스를 설계할 때 사용자가 선입견 때문에 잘못된 선택을 하지 않도록 신경을 쓰야 한다. - 암묵적인 UI 약속을 지키자. - *다크넛지Dark Nudge :사용자가 어떠한 의도를 가지고 옵션을 선택하지만 의도와는 다른 일이 발생한 것이다. 이는 사용자에게 나쁜 선택을 요구하는 것이다.
가용성 휴리스틱 : 자신의 경험, 기억에 의존해 무언가를 더 과장되게 판단하는 것
디자이너는 각 서비스 영역마다 형성된 사용성 패턴을 파악해 인터페이스에 잘 녹일 수 있도록 노력
휴리스틱 평가(Heuristic Evaluation)는 사용성 테스트의 일종입니다. 휴리스틱이라는 단어는 '직관적으로 문제를 해결하는' 방식을 의미하는데, 이 평가에서는 일반적으로 사용성에 대한 "베스트 프랙티스" 또는 일종의 '지침'을 사용합니다. 이 지침들을 따라 웹사이트나 앱 등의 사용자 인터페이스가 얼마나 사용하기 쉬운지를 전문가가 평가하는 것입니다.
예를 들어, 한 전문가가 쇼핑 웹사이트의 사용성을 테스트한다고 가정해 봅시다. 이 전문가는 다음과 같은 일반적인 휴리스틱 지침을 가지고 웹사이트를 살펴볼 것입니다:
사용자에게 시스템이 현재 무엇을 하고 있는지 명확하게 보여준다.
단순하고 일관된 디자인을 사용한다.
오류를 방지하거나, 발생한 오류에서 쉽게 복구할 수 있게 한다.
사용자가 원하는 정보나 기능을 쉽게 찾을 수 있게 한다.
전문가는 이런 지침에 따라 웹사이트를 검토하고, 어떤 부분이 잘 되어 있는지, 어떤 부분이 개선이 필요한지를 보고서로 정리합니다. 이런 방식의 장점은 빠르고 비교적 저렴하게 초기 단계에서 큰 문제점을 찾아낼 수 있다는 것입니다. 그러나 이것이 사용자 테스트를 완전히 대체할 수 있는 것은 아니며, 실제 사용자들의 피드백도 함께 고려해야 합니다.
제이콥 닐슨(Jakob Nielsen)의 휴리스틱 평가
제이콥 닐슨(Jakob Nielsen)은 사용자 인터페이스(UI) 디자인과 사용성에 관한 선도적인 전문가 중 하나입니다. 그는 사용성 평가를 위한 10가지 휴리스틱 원칙을 제시했는데, 이 원칙들은 디자인의 사용성을 빠르게 평가하는데 도움이 됩니다.
시스템 상태의 가시성 (Visibility of System Status)
사용자가 시스템이 현재 무엇을 하고 있는지 쉽게 알 수 있어야 합니다.
로딩바, 스피너(짧은로딩)
시스템과 실제 세계 사이의 일치 (Match between System and the Real World)
시스템이 사용자에게 친숙한 언어와 개념을 사용해야 합니다.
사용자 제어와 자유 (User Control and Freedom)
사용자가 실수를 해도 쉽게 복구할 수 있게 하는 옵션을 제공해야 합니다.
일관성과 표준 (Consistency and Standards)
단어, 상황, 액션 등이일관되게 사용되어야 합니다.
오류 예방 (Error Prevention)
시스템이 사용자가 오류를 범할 가능성을 최대한 줄이는 디자인이 필요합니다.
기억보다는 직관적으로 (Recognition Rather Than Recall)
사용자가 정보를 기억하게 하지 말고, 필요한 정보를 쉽게 인식할 수 있게 해야 합니다.
예: 검색창만 노출하는 대신 추천 키워드 등을 같이 제공, 아이콘과 텍스트를 함께 사용 등).
유연성과 효율성의 극대화 (Flexibility and Efficiency of Use)
초보자와 숙련자 모두 사용하기 쉬워야 하며, 숙련자에게는 단축키 등을 제공할 수 있습니다.
(예: 자주 쓰는 메뉴 모음, 단축키, 순서 변경 등).
미니멀 디자인 (Aesthetic and Minimalist Design)
불필요한 정보는 없어야 하며, 필요한 정보만을 제공해야 합니다.
관계없는 요소를 제거
오류를 도와주기 (Help Users Recognize, Diagnose, and Recover from Errors)
오류 메시지는 명확하고 해결책을 제시해야 합니다.
도움말과 문서 (Help and Documentation)
필요한 경우, 사용자가 참조할 수 있는 도움말과 문서가 제공되어야 합니다.
이러한 휴리스틱 원칙들은 전문가가 어플리케이션 또는 웹사이트를 신속하게 평가하고 문제점을 식별할 수 있게 돕습니다. 단, 이것은 초기 단계의 빠른 검사용이며, 실제 사용자 테스트를 완전히 대체할 수 있는 것은 아닙니다.
휴리스틱 10문항
시스템은 적절한 시간과 피드백으로 사용자에게 진행 사항을 알려주고 있는가?
전문적인 용어 대신 사용자에게 친숙한 단어를 사용하고 있는가?
사용자가 자신의 실수를 금세 바로잡을 수 있는가?
서비스 전체에 일관성과 기준이 느껴지는가?
사용자의 실수로 원치 않은 결과가 나올 때 즉각 인지 할 수 있는가?
기능을 익힐 필요 없이 직관적으로 이해할 수 있는가?
숙련 사용자를 위한 배려가 되어있는가?
심미적이고 미니멀한 디자인인가?
에러 문구는 해결책을 빠르게 제공하고 있는가?
사용자가 문제에 부딪혔을 때 기능에 대한 도움말을 빠르게 찾아볼 수 있는가?
UI 요소들...
체크 박스Check Box
라디오 버튼Radio Button
드롭다운 목록Dropdown Lis
스피너Spinner
텍스트 필드Text Field
검색 필드Search Field
브레드크럼Breadcrumb 웹/앱에서 사용자의 위치를 파악하기 위한 디자인 요소로
페이징Pagination 한 페이지에 나오는 콘텐츠 양이 일정량을 넘을 때 분류
태그Tags 유사한 콘텐츠를 분류하기 위한 인터페이스로
알림Notification 새로운 정보가 도착했다는 것을 알리는 인터페이스
진행 바Progress Bar 로딩이 길 때 사용하는 인터페이스.
스피너 로딩Spinner Loading 진행 바보다 짧은 로딩에 사용하는 인터페이스로
툴팁Tooltip 기능 아이콘에 추가 설명이 필요할 때 마우스 포인트를 얹으면 나타나는 설명 창
팝업Pop up 사용자 진행을 돕거나 시스템 오류 같은 공지가 필요할 때 사용한다
툴바Tool Bar 주요 기능을 모아 놓은 인터페이스로,
GNBGlobal Navigation Bar 주로 웹 페이지 상단에 있으며 클릭하면 링크된 페이지로 이동할 수 있다
탭바Tab Bar 모바일 앱 하단에 표시되는 아이콘 모음
모달 윈도우Modal Window 기존 페이지와 부모-자식 관계의 창이 뜰 때
토스트 팝업Toast Pop-up 진행에 필요한 간단한 피드백을 제공
아코디언Accordion 전달할 내용이 많고 항목에 따라 내용이 나뉠 때 사용하는 인터페이
빈 화면Empty Data 표시할 데이터가 없을 때 띄우는 화면이다
코치 마크Coach Marks : 사용자가 처음 앱을 열었을 때 중요 기능을 미리 알려 주는 인터페이스
