[소프트웨어공학] UI 설계

 

사용자 인터페이스 User Interfase

: 소프트웨어 - 사용자 상호작용 수단 

 

input -> 사용자가 시스템을 조작

output -> 시스템이 조작 결과를 표현 

 

UI의 중요성은 아무리 강조해도 지나치지 않는다!

- 요즘은 아무리 좋은 소프트웨어라도, UI가 별로면 사람들이 쓰지 않는다. 

- 소프트웨어 기능보다 UI에 의하여 평가되는 경향이 강해짐 

 

-> UI를 제대로 설계해야 함 

-> 기본 개념과 설계 원리를 익히자 

 

+ 소프트웨어 개발 과정 중 설계가 특히 중요한 작업은 아키텍처 설계와 UI 설계이다. 

아키텍처 설계는 구성 요소인 모듈이 쉽게 읽히고 이해하기 쉽고 재사용, 확장 가능하도록 설계 하는 것이 목표이다.

UI설계도 마찬가지로 UI의 구성 요소들을 이해하기 쉽고 효율적으로 설계 해야 한다. 

추가로 UI설계는 사용성 측면을 중요하게 고려해야 한다. 

 

자세한 내용을 살펴보자. 

---

 

1. UI 기본 개념

사용성, 멘탈모델, 피드백, 제약 

---

사용성 

: 사용자가 어떤 사용 환경에서 특정 목표를 달성하기 위해 소프트웨어 제품이 효과적 및 효율적으로 만족하게 사용할 수 있는 정도

쉽게 말해, 시스템이 얼마나 사용하기 편한지를 나타내는 척도이다. 

 

소프트웨어의 품질 - 기능적 품질 / 비기능적 품질

비기능적 품질 중 하나인 사용성 

 

 

사용성에 영향을 주는 요소 

• 학습용이성 Learnability: 처음 사용하는 것이 얼마나 쉬운가? (친근, 일관성, 단순, 미니멀리즘 필요)
• 효율성 Efficiency: 작업 수행 방법을 배우면 작업을 쉽게 수행
• 기억용이성 Memorability : 오랜만에 사용해도 쉽게 기억
• 낮은 오류율: 오류 거의 X, 오류 나면 쉽게 복구 
• 자신감과 만족: 응용 프로그램의 사용이 얼마나 즐겁고 만족할만한가 

우선 순위 : 즐거움 > 사용하기 쉬움 > 효과적 

 

멘탈 모델 

: 현실 세계의 사물이나 과정이 어떻게 작동하는지에 대한 개인의 이해 

 

사용자는

-> 소프트웨어 작동 방식에 대한 멘탈 모델을 가짐 

-> 행동의 결과와 필요한 행동을 예측 가능

-> 잘 만들어진 멘탈 모델은 소프트웨어 사용성에 영향 ⭐️

 

잘 만들어진 멘탈 모델은 무엇일까? 

개발자의 멘탈 모델 vs. 사용자의 멘탈 모델

 

ex. 전자상거래 장바구니 기능

개발자는 소프트웨어 내부 구조를 잘 알고 있지만, 사용자는 모른다. 

사용자 입장에서 상품을 선택하면

'상품 선택 정보를 데이터베이스에 삽입하겠습니까?' 라고 묻는 것 보다 '장바구니에 상품을 담겠습니까?' 라고 묻는 것이 이해하기 쉽다. 

 

이런식으로 현실에 존재하는 개념을 가져와 멘탈 모델을 설계함으로써 사용성을 높일 수 있다. 

=> 사용자의 멘탈 모델을 중심으로 디자인해야 한다. 

=> 기존 멘탈 모델이 충분하지 않은 경우 은유, 비유 활용 (ex. 휴지통 - 파일 삭제) 

 

 

피드백 

: 사용자 지시에 대한 효과를 보여줌.

 

ex. 로딩 중에 뜨는 회전 휠

 

반응 시간 표시

• 1초내 수행: 피드백 없어도 됨
• 1~10초 걸리는 작업: 회전휠, 바퀴 같은 애니메이션
• 10초 이상: 진행표시기 

 

 

제약

사용자들은 메뉴얼을 읽기 싫어한다. 사용자들은 익숙하지 않다. 

-> 직관적으로 설계

 

안 좋은 예시

• 장황한 설명 팝업창
• 선택 버튼이 많은 팝업창 
• 혼동을 주는 팝업창
• 사용자를 두렵게 하는 경고 메시지

 

 

 

2. UI 설계 원리 

---

단순하고 자연스럽게 만들어라

- 친숙한 언어 사용하기, 오류 메시지 주의

 

안전한 사용과 오류 회복이 쉽도록

-삭제시 경고, 실행취소 기능 

 

직접 조작하고 바로 피드백 받도록

- 탐색기의 파일 드래그&드롭

 

일관성 유지

- 프로그램, 제품군, 동일 플랫폼 내

 

즉각적으로 만족

 

단축 명령 제공

 

인식하기 쉽게 만들어라 

- 색상, 양식, 시각적 신호 활용

 

공간 기억을 활용

- 동일 위치 메뉴 구성

 

접근성이 좋게

- 텍스트, 이미지 사용, 장애인 접근성

 

도움만과 문서는 최후의 수단 

 

 

3. UI 설계 과정

---

 

1. 사용자 분석

2. UI 테스크 분석

3. UI 설계와 구현

4. 사용성 테스트 

-> 다시 1번으로 

 

 

사용자 분석⭐️

누가 사용할 것인가?

사용자의 지식 및 역량 수준에 따라 디자인 세부 사항이 변경됨. 

 

일반적인 사용자 범주 - 청소년 / 숙련된 사용자 / 초보자

 

 

각 사용자에 대해 다음 질문에 대한 답변을 생각해볼 것

Q1. 사용자의 목표는 무엇인가?

Q2. 사용 스킬과 경험은 무엇인가?

-> 사용자가 자신의 스킬, 경험을 활용하여 목표를 효율적으로 충족하는 UI

-> 이상적으로는 모든 사용자 유형에 적합해야 함 

 

 

테스크 분석

프로그램이 어떤 작업을 수행하는가?

 

유즈케이스 별로 UI 흐름 파악 -> GUI 프레젠테이션 목표, 내용 흐름 결정

 

작업을 더 작은 하위 작업으로 쪼개가면서 UI의 흐름을 파악하고 결정할 수 있음. 

하위 작업 간의 정보 흐름에 따라 -> GUI 내용 흐름이 결정

 

 

UI 설계와 구현

GUI를 디자인하고 코드에 구현 

 

자주 사용되는 개념 세 가지 

마법사(wizard): 미리 저장된 순서로 사용자를 안내. 한 번에 한 단계씩 -> 쉽게 따라오도록

사이트 이동경로(breadcrumbs): 웹, 앱에서 사용자의 위치를 표시하는 내비게이션. 현재 페이지에 대한 위치와 함께 내용을 제공

메타포: 사용자의 개념적 인식 모델. 메타포 사용-> 사용자는 그것을 사용하는 방식으로 프로그램 작동 방법을 예측하고 조작함. 

 

사용성 테스트 

테스트 목적 설정

- 학습성: 작업을 효율적으로 수행 

- 오류율: 사용시 최소한의 오류 

- 예측성: 출력 및 UI 컨트롤 해석 가능 

- 만족함: 주관적 느낌 

 

대표 사용자 선정

- 5명 이상

 

설문 준비 및 테스트

- 테스트 대상 준비

- 사전, 사후 테스트 설문지 및 작업 시나이로 정의 

- 참가자에게 수행 요청

- 사용성 테스트를 수행하고 데이터 기록 

 

 

4. UI 요소

---

일반적으로 UI는 먕령어보다 다양한 그래픽 요소들을 더 많이 사용

 

GUI 요소 

- 윈도우 : 응용 프로그램 내용이 표시되는 영역

- 탭 : 응용 프로그램이 여러 인스턴스를 실행할 수 있는 경우 별도의 창

- 메뉴 : 표준 명령의 배열

- 아이콘 : 응용 프로그램을 나타내는 작은 그림

- 커서 : 포인터

- 명령 버튼 : 사용자의 명령을 지시 받으려 할 때 사용 

- 다이얼로그 박스 : 시스템이 수행할 작업에 대한 정보를 사용자에게 입력하게 할 때

- 텍스트 박스 - 메시지를 보여주거나 데이터 입력할 곳

- 토글 버튼 - 버튼을 클릭하면 상태를 on, off로 변환

- 리스트 박스 - 사용자가 선택할 수 있는 후보 리스트를 디스플레이

- 드롭다운 리스트 박스 - 현재의 선택을 보여주고 사용자가 화살표를 클릭

- 라디오 버튼 - 여러 가지 제시된 것 중 하나만 선택할 때

- 체크 박스 - 그룹 중에 하나 이상의 후보를 선택할 때 (다른 항목과 관련없이 on off 선택)

 

 

5. 화면 및 출력 설계 

---

화면 설계 - 미적 감각 + 기술 능력

매력적이고 사용하고 작업하기 쉽게 설계해야 함. 

 

 

어떤 사용자들은 대부분의 시간을 자료 입력에 사용하는 경우가 많음 

-> 반복되는 자료 입력과 관련된 인터페이스는 어떻게 설계? 

 

쉽게 배울 수 있고 사용할 수 있는 자료 입력 화면 가이드라인 

- 항목의 입력이 끝났음을 알리기 위한 키를 반드시 정의 

- 콤보 박스를 사용하여 입력하여 하면 입력 오류를 줄일 수 있다. 

 

입력 양식

- 처리할 자료를 요청하고 모으는데 사용하는 양식 

 

 

출력물 설계

출력물 - 다양한 종류, 다양한 기술

대부분은 인쇄된 리포트 

- 리포트는 전문적이어야 하며, 무엇보다 읽기 쉬어야 함 

- 모든 리포트는 머리말, 꼬리말이 있어야 함

- 항목은 논리적인 순서로 표시, 분류