소프트웨어 산업이 발전하고, HW-SW 융합개발의 흐름으로 SW 개발수요가 확대되는 등 시장 경쟁이 치열해지는 상황에서 시장 경쟁력을 확보하기 위해 소프트웨어의 품질향상 및 차별화가 요구되고 있습니다.
소프트웨어가 최종적으로 소비자에게 전달될 때의 경험이 소프트웨어의 경쟁력이 되는 시점으로 기술적인 진보와 함께 디자인적인 완성도가 중요합니다.
SW자산뱅크 시스템에서 UI/UX 개발도우미 서비스를 통해 지원되는 검증된 UI/UX 개발요소를 활용하여, UI/UX 분야에 대한 개발비 및 인력, 전문적 노하우가 부족한 국내 기업들이 손쉽게 UI/UX를 개발함으로써, 개발기간은 단축시키고, 양질의 결과물을 도출하여, 소프트웨어 품질 경쟁력을 효율적으로 강화시킬 수 있도록 지원합니다.
실질적으로 국내 기업에서 UI/UX 개발은 SW 개발 프로세스 중 가장 비 전문분야에 해당되고, 전문적 디자인 분야임에도 기업 내부의 SW 개발자가 UI/UX 업무를 수행하는 것이 현실입니다. SW자산뱅크 시스템에서 UI/UX 개발도우미 서비스를 통해 활용할 수 있는 UI/UX 개발요소를 지원함으로써 개발소요기간 단축 및 개발인력자원의 효율적 운용을 지원합니다. 궁극적으로 사용자 중심의 UI/UX 개발을 통한 소프트웨어의 UI/UX 사용자 가치품질 향상을 목표로 합니다.
소프트웨어 UI/UX 활용소개 동영상
A사의 IoT 포털 서비스는 온도계, 습도계, 전구, 버튼 등 다양한 디바이스를 게이트웨이를 통해 클라우드에 연동할 수 있으며, 디바이스 별 규칙을 직접 설정하고 대시보드를 통해 손쉽게 관리할 수 있는 차별화된 서비스다.
이 서비스는 농장이나 소규모 사업장에서도 쉽고 빠르게 디바이스를 연결할 수 있어 전문 지식이나 구축 경험이 없는 초보 사용자도 최소의 학습으로 이용할 수 있는 환경을 구축하는 것이 매우 중요하다.
초보 사용자가 이 서비스를 제대로 이해하고 있는지, 쉽게 적응하는지 등 사용성 문제와 이슈를 살펴보기 위해 사용성 테스트를 시행하였고, 그 결과 다음과 같은 시사점을 얻을 수 있었다.
서비스 개념을 사용자가 제대로 이해하지 못하고 것이 가장 큰 문제였다. 그래서 사용자의 사고 방식에 맞게 서비스를 재설계하는 데 주안점을 두었고, 그 결과 "최소 학습으로 이용할 수 있고, 상황과 설정을 한 눈에 파악할 수 있는 서비스"라는 방향성 아래 다음과 같은 개선 전략을 수립하였다.
대시보드를 실제 존재하는 센서와 그 위치를 반영하는 사용자 인터페이스로 재정의하고, 장소 기반으로 구성/운영되도록 설계하고, 센서 현황, 통계 정보 등을 제공하여 기술적 판단을 도울 수 있도록 개선하였다.
서브 대시보드는 메인 대시보드와 달리 장소와 위치 개념이 있다. 현장 구조에 맞게 정보 구조를 만들고, 센서를 게이트웨이와 디바이스 별로 확인할 수 있도록 구성하였다. 센서 개수가 많은 상황을 고려하여 위젯 크기를 줄이고 구성 요소를 최소화하여 핵심 정보에 집중할 수 있도록 설계하였다.
센서 상세는 해당 센서에 대한 모든 것을 알 수 있도록 개선하였다. 이를 위해 규칙 관리와 위치 정보를 추가하였다.
규칙 관리는 여러 화면을 이용하지 않고 한 화면에서 설정/관리할 수 있도록 구성하여 가시성을 높였고, Trigger, Condition, Action, Type, Method, Parameter와 같은 전문 용어를 사용하지 않고 맥락에 의해 해당 요소를 이해할 수 있도록 설계하였다.
1.규칙만들기
2. 트리거 선택 - 타입 선택
3. 트리거 선택 - 메소드 선택
4. 트리거 선택 - 파라미터 입력
5. 액션 선택
6. 액션 선택 - 타입 선택
7. 액션 선택 - 메소드 선택
8. 액션 선택 - 파라미터 입력
규칙 목록은 규칙 관리로 이동하지 않고 목록을 통해 어떤 규칙인지 파악할 수 있도록 구성 요소를 재정의하였고, IFTTT와 같이 규칙을 서로 공유하고 활용할 수 있는 공간을 추가하였다.
B사의 출입통제 시스템은 빌딩, 소규모 오피스, 산업시설의 물리보안 소프트웨어로써 출입문, 리더, 입력장치, 출력장치 등을 연계하여 침입감시, 출입통제 등 보안업무를 실시간으로 수행하는 시스템이다.
이 시스템은 해외 시장 진출을 위해 각종 경보 이벤트의 빠른 인지와 이벤트 원인에 대한 직관적 표현 등을 개선하기 위해 맞춤형 관제 화면이 필요하다. 또한, 향후 새로운 비즈니스 모델을 위해 버티컬 플랫폼 전략을 활용한 출입통제 시스템의 사용성 이슈를 확인하였다.
이 시스템은 단순한 업무 시스템이 아니라 향후 비즈니스 모델의 확장까지 고려해야 하는 버티컬 플랫폼 서비스인 점을 고려하여 PC의 바탕화면의 개념을 차용하고 화면 구조를 논리적이고 일관성 있게 설계하여 "비즈니스 모델의 확장성과 업무 효율성의 극대화"를 추구하였고, 이를 위해 다음과 같은 개선 전략을 수립하였다.
개선안은 가상 스크린렛 방식의 메인 페이지, 출입자 페이지, 모델러 페이지, 뷰어 페이지 등 핵심 서비스 중심으로 작업하였고, UI 설계안, GUI 디자인 시안, 스타일 가이드, 결과보고서 등 향후 개발 작업에 직접 활용할 수 있는 산출물을 제공하였다.
메뉴를 신속하게 확인하고 읽을 수 있어야 한다는 원칙 아래 내비게이션 영역의 메뉴 항목을 일렬로 정렬시켰고 열고 닫는 기능도 과감히 제거하였다. 또한, 밝은 배경을 사용하여 메뉴 텍스트의 가독성을 높였고, 본문 영역에 제목을 두지 않은 문제를 해결하고 검색과 컨트롤 버튼을 재배치하여 페이지 헤더 영역을 단일 행(Single Line)으로 구성하였다.
장치와 지역(위치) 정보가 3개의 테이블로 표현되어 화면의 복잡성을 가중 시키고 있었다. 이를 해결하기 위해, 장치 목록-상세 정보-지역 정보가 1개의 테이블로 구성되도록 재설계하였다.
다른 곳과 달리 멀티 뷰어(Multi-viewing) 방식을 채택하고 있어 창 열기의 일관성을 유지되지 않고 있으며, 잦은 스크롤링으로 인한 사용성 저하가 우려되어 창 열기 방식을 재정의하였다.
C사의 멀티미디어 통합관리 솔루션은 웹 기반으로 이미지, 동영상, 음성 파일 등을 개별, 폴더, 묶음 등 다양한 파일 단위로 업로드/다운로드할 수 있는 솔루션이다. HTML5 기술을 적용하여 Activ eX나 NPAPI이 없어도 웹 기반으로 멀티미디어 서비스와 영상 편집 기술을 구현할 수 있다는 강점을 가지고 있다.
이미 시장에는 많은 종류의 멀티미디어 관리 솔루션이 출시되었기 때문에 C사만의 차별화 된 경쟁력을 확보하는 것이 중요하였다.
멀티미디어 관리는 사용자에게 제공할 멀티미디어 콘텐츠를 관리하는 것이므로 운영자가 곧 사용자는 가정 하에 "관리자 화면이 곧 사용자 화면인 새로운 개념의 멀티미디어 콘텐츠 관리 솔루션"이라는 개선 방향을 설정하였고, 이를 구현하기 위해 다음과 같은 개선 전략을 수립하였다.
기존의 콘텐츠 관리 페이지는 전형적인 형태와 구성이었다 개선안에서는 "관리자도 사용자다"라는 원칙 아래 멀티미디어 콘텐츠를 좀 더 편하고 빠르게 탐색/관리할 수 있도록 설계하였다. 특히, 관리자 화면이 곧 사용자 화면이 되도록 콘텐츠 목록을 디자인하였고, 구글 이미지 검색의 장점을 벤치마킹하여 적용하였다.
콘텐츠 상세 페이지는 멀티미디어 콘텐츠 특성을 고려하여 구글 이미지 검색처럼 미리보기 기능을 추가하였고, 상세 페이지는 반드시 필요한 정보 위주로 재구성하였다.
콘텐츠 등록 페이지는 멀티미디어 콘텐츠와 업무 특성을 고려하여 한 번에 여러 개의 파일을 등록하고, 마우스 드래그 앤 드롭 방식(Drag & Drop)을 지원할 수 있도록 개선하였다. 그리고 한 화면에서 정보 입력, 등록 진행 상태 확인, 등록 완료 상태 확인이 동시에 가능하도록 설계하였다.
D사의 전자팩스 서비스는 PC 클라이언트 프로그램을 통해 팩스와 SMS를 송수신하는 서비스다. 주 고객층은 기업이며, 다른 서비스와 달리 후불제를 채택하고 있다.
기존 기업 고객 대상의 테스트에서는 이미 기존 서비스에 익숙해 있어 불편함을 느끼지 못하였지만, 초보 사용자 대상의 테스트에서는 전송 파일을 전환하는 과정에서 문제가 발생하였다. 새로운 일반 사용자 수요층을 발굴하고 기업 수요층을 확대하기 위해서는 개선 가능한 모든 것에 대해 과감한 변화가 필요하다는 결론에 이르렀다.
팩스와 SMS 송수신에 필요한 기능 화면이 20개가 넘을 정도로 많았는데, 화면 수를 최소화하고 현재 창에서 모든 기능을 수행할 수 있도록 재설계하였다. 기존 프린터 기능을 이용하여 파일을 전환한 후 팩스를 보내는 과정에서 심각한 사용성 문제가 발생하여 팩스 보내기를 이메일로 첨부 파일을 보내는 것과 같은 방식으로 이용하도록 개선하였다.
메뉴 바를 없애고, 핵심 서비스인 팩스, 문자, 주소록을 중심으로 사용자 경험이 이루어지도록 구성하였다. 대량으로 팩스를 송수신하는 기업 고객을 고려하여 팩스 현황을 한 곳에서 확인할 수 있는 팩스 메인 화면을 신설하였다.
팩스보내기 화면은 팩스 송신에 집중할 수 있도록 불필요한 요소를 최소화하여 구성하였고, 이메일 보내듯이 팩스를 보낼 수 있도록 사용 흐름을 변경하였다. 특히, 받는 사람은 이메일의 연락처 칩(Contact chip) 방식으로 표현하였고, 보낼 문서는 이메일 첨부파일 기능과 동일한 방식으로 구현하였다.
문자보내기는 팩스보내기와 같은 절차와 방법으로 사용할 수 있도록 일관성 강화에 주력하였고, 주소록은 필요 시 호출하여 사용하도록 구성하여 받는 사람과 메시지 입력에 집중할 수 있는 환경을 구현하였다.
E사의 통합관제 소프트웨어는 치안과 재난 상황 관리를 위한 필수 기능 중심으로 구성된 소규모 상황실 대상의 관제 소프트웨어로써 대규모 상황실을 위한 관제 소프트웨어와의 차별성을 강화하고 해외 시장 공략을 위한 주력 제품이다.
해외 시장 공략을 위해서는 보편적이고 표준적인 측면을 강화하고, 현황을 한 번에 조망할 수 없는 화면 구조, 중요도가 높은 정보의 낮은 가독성 등 관제 소프트웨어의 기본 품질 요소에 대한 보강 작업이 시급하였다.
관제 소프트웨어는 사건/사고에 신속하게 대응하고, 동시 다발적으로 발생하는 상황에 효과적으로 대응할 수 있도록 멀티 태스킹/세션 개념을 적용하였다. 이 소프트웨어는 관제실과 현장 간 실시간 커뮤니케이션 기능이 강점이다. 이 강점을 살려 커뮤니케이션 결과를 시간 순서 기준으로 자동으로 상황 일지가 생성되는 기능을 추가하여 관제 업무의 효율성을 강화하였다.
관제 업무의 특성 상 실제 사용 상황에서의 유용성과 사용성이 더 중요하다는 판단 아래 선호도(User Preference)보다는 성과(User Performance)에 초점을 두고 진행하였고, UI 설계안, GUI 디자인 시안, 스타일 가이드, 결과보고서 등 향후 개발 작업에 직접 활용할 수 있는 산출물을 제공하였다.
탭으로 구분된 화면 구조를 탭 없이 사건 정보를 확인할 수 있도록 구성하였고, 사건 정보의 가독성을 높이기 위해 밝은 배경을 채택하였다.
메인 화면의 사건 목록을 선택하면 해당 사건 화면이 탭 브라우징 방식으로 열리도록 설계하고, 컨트롤 버튼은 영어, 스페인어 등 글자 수가 많은 외국어를 고려하였다.
F사의 프로그램 라이팅 소프트웨어는 PCB 생산과 테스트 공정에서 PCB의 마이크로 컨트롤러와 플래시 메모리에 프로그램을 설치하기 위한 소프트웨어다. 생활가전, IoT 응용 제품, 자동차용 전자장치 생산에 사용되며, 정부의 스마트공장 도입 정책에 따른 자동화 된 생산라인 구축을 위한 기반 기술이다.
이 제품은 주로 생산 현장의 특정 업무에 사용하는 특수 소프트웨어여서 스크립트 명령 방식으로 주요 기능을 제어하고 있어서, 최소의 교육훈련으로 적응할 수 있도록 사용성 품질 향상이 시급했다.
명령어 인터페이스(CLI, Command Line Interface)에서 그래픽 사용자 인터페이스(GUI, Graphic User Interface)로 전환하였고, 이 소프트웨어로 수행하는 프로그램 설치 작업은 정해진 프로세스를 따라 진행되므로 소프트웨어를 사용자 작업 프로세스에 맞게 구성하여 불필요한 탐색과 선택 부담을 최소화 하였다.
CLI에서 GUI로의 전환은 거의 모든 것을 바꿔야 하는 것을 의미했다. 그래서 개선 작업은 모든 화면을 대상으로 진행되었고, UI 설계안, GUI 디자인 시안, 스타일 가이드, 결과보고서 등 향후 개발 작업에 직접 활용할 수 있는 산출물을 제공하였다.
제조사 선택, 디바이스 선택, ID 체크 과정을 직관적으로 표현하였다.
명령어를 사용하지 않고 화면 순서대로 조작하면 파일을 로드할 수 있도록 구성하였다.
프로그램 라이팅이 진행되는 상태를 시각적으로 확인할 수 있도록 표현하였다.
파일 전송 대상과 형식을 직관적으로 확인할 수 있도록 표현하였다.
국내 SW기업이 자체 브랜드를 가진 패키지SW를 출시하고, 해외수출 및 투자유치를 진행하는 과정에서 기술적, 기능적 품질은 크게 평가받으나, 시각적 요인에서 가치품질개선에 대한 바이어들의 요구가 커지고 있습니다. 최종적으로 소비자에게 보여지는 시각적 완성도부터, 사용성 개선, 사용자 경험 만족도 개선에 이르는 SW의 UI/UX 기반 가치품질 역량강화가 매우 필요합니다.
SW공학센터에서는 SW기술자산 활용촉진사업의 일환으로 SW자산뱅크 등록기업을 대상으로 중소기업의 UI/UX 역량강화 프로그램을 운영, 중소기업 SW에 대한 UI/UX 컨설팅 사업을 진행하였으며, 2013년 진행된 컨설팅 중 대표 사례를 아래에 소개합니다.
L사
컨설팅 최종안
As Is 기존화면
To Be 제안화면
UI 분석 및 제안
현실 세계와 부합되도록 설계한다. Match between system and the real world
As Is
- 기능키(Function Button)들이 산재되어 사용자에게 혼란을 유발함
To Be
- 유사한 버튼 그룹핑 및 재배치, 9개 이상의 버튼 그룹핑은 지양함
화면 디자인은 심미적이고 간결해야 한다. Aesthetic and minimalist design
As Is
- 기능위주로 배치된 컨텐츠를 태스크(TASK)위주로 배치되도록 해야함
To Be
- 순차적 Usage Path( I형 Path)가 가능하도록 개선함
화면 Density 비교 분석/ Usage Path 분석 및 제안
화면 Density Check
As Is
To Be
Usage Path Check
As Is
To Be
목표정의
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
UI/UX 개발 목표 및 범위 정의 | UI/UX 개발 목표 및 범위 정의 | UI/UX 개발 목표 |
- 명확한 목표 및 범위 정의 - 이해 관계자와의 협의 및 합의 - UI/UX 개발 목표의 내부관계자 합의 - 타사/선진 사례, 트렌드 조사 등을 통한 개발 목표 수립 - 내부 관계자간 개발 목표 협의 및 공유 |
UI/UX 개발 목표 및 범위 정의
최근 소프트웨어 개발 차별화를 위해 UI/UX 분야의 개발 중요성이 강조되고 있음
소프트웨어 개발 목표 및 범위 정의 단계에서 UI/UX 분야의 개발 목표 및 범위 정의를 필수적으로 수행하여 프로젝트 계획 전반에 반영하기 위한 활동으로,
성공적인 수행을 위해 내부관계자가 UI/UX 개발 필요성 및 목표를 공유하고 개발 범위를 수립하기 위한 활동임
세부활동
1. 경영진의 UI/UX 관련 개발 요구사항 조사 및 정의
목표
경영진을 대상으로 p.83심층 인터뷰를 통해 의견을 반영하여 비즈니스 요구사항을 정의함
경영진 인터뷰를 통해 제품의 사업적, 기술적 측면의 요소를 깊이 이해하는 것을 목표로 함
경영진이 생각하는 사업적 목표를 바탕으로 UI/UX 디자인 프로세스를 정의함
경영진 인터뷰는 반드시 사용자 리서치를 시작하기 전에 진행되어야 함
(여기서 얻은 결과를 토대로 앞으로의 효과적인 리서치를 계획할 수 있는 것)
활동
TIP
경영진 인터뷰는 여러 명을 한꺼번에 하는 것보다 개별로 진행하는 것이 좋음
다수의 목소리에 묻혀 개인의 중요한 의견을 놓칠 위험이 없어야 함
각 인터뷰는 한 시간을 넘어서는 안 됨
2. 자사-타사-사용자분석(3C분석), 트렌드 분석
목표
기존의 자사 제품과 주요 경쟁사 제품을 분석하는 마케팅적 관점으로 시장을 이해함
경쟁 상황을 파악하여 차후 인터뷰에 필요한 질문을 준비하는데 필요한 자료를 구체화함
활동
TIP
제품의 강점과 약점을 상세히 확인해야 함
사용자에게 제공되고 있는 기능과 기존 제품으로 가능한 기술 영역을 이해하는 것이 중요함
지금까지 제작된 시안과 프로토타입이 있다면 함께 분석함
경쟁사 제품을 분석시 도출되는 공통적 핵심 이슈를 중심으로 경쟁사 요소의 문제점, 사용자 핵심 니즈, 미충족 니즈(Unmet Needs)를 준비함
3. 관계자 개발 목표 협의 및 공유 워크샵
목표
앞의 단계에서 조사, 분석된 결과를 토대로 부서간, 내부 관계자간(마케팅, 디자인, 개발, 영업 등의 관계부서) 개발 목표를 협의하여 향후 개발을 원활히 하기 위해 진행함
UX적 차별성이 있는 컨셉 또는 UI의 대폭 개선 등 디자인 및 개발 이슈가 많은 상황에서 필요함
활동
TIP
벤치마킹을 통한 성공, 개선사례 위주의 개발 필요성을 경영진 및 의사 결정자에게 제시, 회사 차원의 지원이 가능하도록 함
내부 관계자간 워크샵에서 중요 이슈들에 대한 협의가 최대한 이루어지도록 하는 것이 중요함
경영진 인터뷰 : 심층 인터뷰(In-depth Interview)
자사 및 타사분석 : 3C(Customer, Company, Competitor)분석, PLC(Product Life Cycle)분석,
BCG 매트릭스, SWOT분석, 5 forces 분석
트렌드 분석 : FAW분석, 이슈분석, 시나리오 플래닝
아이디어워크샵 : 육색사고모자(6 Thinking Hats), 어피니티 다이어그램(Affinity Diagram), 체크리스트법
프로젝트 계획
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
UX 전략 수립 | 사용자 분석 및 니즈조사
UX 차별화(혁신,경쟁)전략수립 |
사용자 분석서 UX 전략 |
- UI/UX 개발 기간 및 비용 반영 - UI/UX 개발 프로세스 정의 - UX 전략의 차별성 |
사용자 분석 및 니즈 조사
데스크리서치(경쟁사 동향)를 통해 정의된 핵심기능 관련, 예상 타겟 고객층의 프로파일을 기술, 정의함
조사 전 무엇을 관찰할 지를 정확히 정의하여 현장에서 만족 수준, 고민점(Pain Points), 표면적으로 드러나지 않은 니즈가 있는지 직접 현장 관찰을 통해 도출하여 이를 토대로 다음 단계에서 UX전략을 수립하게 됨
세부활동
1. 리서치 대상 선정 및 내용 설계
목표
고품질의 리서치 결과를 얻기 위해 적절한 리서치 대상자 선정과 리서치 설계(적절한 인터뷰 기법, 관찰조사 기법, 리서치 포인트 정의 및 내용설계)가 필요함
리서치 대상그룹(표본)이 사용자 행동 유형들을 충분히 포함하면서, 그 범위가 필요 이상으로 넓지 않게 조정하기 위해 대상 선정 및 계획 단계를 거침
활동
TIP
리서치 기법은 리서치 규모와 목적에 따라 정량적, 정성적 리서치를 적절히 사용함
리서치는 불특정 다수의 사람들을 대상으로 수행할 수도 있으나, 리서치 결과의 신뢰성을 위해서는 대상자 선정이 까다롭게 되어야 함
리서치는 벤치마킹이나 통계분석, 전문가 평가 등을 통해서 도출한 이슈들을 실제 사용자들에게 확인하는 절차임
신생기업, 제품의 경우 포커스그룹인터뷰로 시작하여 대상자를 확대해 나가는 것이 좋음
2. 리서치 진행
목표
사용자의 불편사항과 니즈를 파악하기 위한 단계로써, 해당 제품/서비스에 대한 다양한 의견을 수집함
활동
인터뷰 기술
[Do]
심문하지 말고 대화를 나눠라.
이야기에 공감하고, 일방적인 판단은 하지 말라.
전문가가 아니라 배우는 사람이 돼라.
기본적인 질문을 하라.
참가자들에게 보여달라고 요청하라.
볼 수 없는 부분에 대해서는 더더욱 구체적인 이야기를 요청하라.
제안된 기회를 받아들여라.
모순을 경계하라.
디자인 문제를 넘어서지 말고 제품을 넘어서라.
비언어적 신호에 주의를 기울여라.
너무 많이 말고 약간 앞서 생각해라.
팀원들을 믿어라.
[Do not]
유도질문을 하지 말아라.
인터뷰 참가자에게 해결책에 대해 묻지 마라.
인터뷰 도중 문제를 해결하려 하지 말라.
3. 리서치 결과 정리
목표
필드리서치(데스크리서치와 달리 사용자 사용행태를 실제로 조사, 에스노그라피, 옵저베이션 등이 있음) 결과분석을 토대로 핵심이슈 도출을 통해 시사점을 찾고 사용자 경험 가치 발굴을 목표로 하며 이것은 전략과 디자인 개발의 토대가 됨
이슈별, 사용자별, 사용자의 컨텍스트별, 사용자의 경험별 분류기준을 적용하여 필드리서치 결과를 정리함
리서치 분석 결과 그대로 핵심이슈가 될 수도 있지만, 유추나 재해석, 결과들의 복합적 해석, 페르소나(Persona), 사용자 멘탈모델(Mental Model)등과 복합적 해석을 통해 핵심이슈가 도출될 수 있음
어피니티 다이어그램(Affinity Diagram), 인지도 맵(Cognitive Maps)기법 등을 활용하여 정리함
[리서치 결과분류]
분류기준 | 내용 | |
---|---|---|
이슈별 | 발견된 이슈별 분류 | |
사용자별 | 인구 통계학적 분류, 제품 이용 특성간 분류, 수행 역량별 분류 | |
사용자의 컨텍스트별 | 장소, 시간, 상황의 영향력에 따라 분류 | |
사용자의 경험별 | 니즈 | 니즈계층별(IA/UI/디자인/서비스/콘텐츠), 디자인 영역별(유용성/신뢰성/사용성/감성) 분류 |
동기 | 사용자들은 왜 우리제품.서비스를 찾는가? 내적인 동기와 외적인 동기는? 사용자들은 왜 우리제품/서비스를 이탈하는가? | |
행태 | 사용자 이동경로 및 연속된 행동, 예상과 실제 일어난 행동간의 일치성(제품/서비스 이용시 보이는 움직임, 표정, 주저함, 머뭇거림, 정지상태, 주의력 분산 등) |
** 참조서식, 인터뷰 리포트
[정성적 리서치 : 주관적 생각을 조사]
포커스 그룹 인터뷰(Focus Group Interview)
심층 인터뷰(In-depth Interview)
사용자 VOC(Voice of Customer)분석
인지도 맵(Cognitive Maps)
맥락적 인터뷰(Contextual Interview)
에스노그래피(Ethnography-Field Research)
어피니티 다이어그램(Affinity Diagram)
[정량적 리서치 : 통계수치를 조사]
서베이(Survey)
아이트랙킹(Eyetracking)
UX차별화(혁신,경쟁)전략 수립
선행조사된 시장 현황, 사용자 조사 결과를 토대로 UX전략의 포지셔닝을 하는 단계임
사용자, 비즈니스, 기술적 관점의 목표를 설정하고 UX차별화 전략을 수립함
세부활동
1. UX차별화(혁신,경쟁)전략 수립
목표
경쟁환경, 기술적 발전, 사용자의 니즈를 반영하여 시장에서 차별화될 수 있는 혁신, 경쟁 전략을 수립함
"사용자는 뭘 원한다. 그래서 우리 제품/서비스는 이런 가치를 담아야 한다."라는 거시적 시각에서 접근하는 UX Value를 작성함
활동
출처 : UX1, UX Consultant 과정
비즈니스 모델 캔버스(Business Model Canvas) + SWOT분석
3C 분석 & FAW(Forces at Work)
요구사항 정의
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
사용자 요구사항 도출 |
페르소나(Persona)정의 컨셉모델 정의 사용자 요구사항 정의 |
페르소나 정의서 컨셉모델 정의 요구사항 매트릭스 |
- 단계 시작 전 UI/UX 전략의 참여인력간 공유 - 페르소나(Persona)정의의 적합성 - 사용자 불만사항/니즈로 부터 적합한 UX 전략 도출 - 단계 종료 후 UI/GUI 컨셉의 UX 전략 일관성 검토 |
UX 컨셉션 정의 | UI 컨셉션
GUI 컨셉션 |
메뉴구조도 와이어프레임스케치 스토리보드 GUI 이미지 무드보드 |
- 단계 시작 전 UI/UX 전략의 참여인력간 공유 - 단계 종료 후 UI/UX 컨셉의 UX 전략 일관성 검토 |
페르소나(Persona) 정의
페르소나(Persona)는 잠재적 사용자 및 구매자들의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 원형으로, 사용자를 보다 면밀하게 분석하기 위해, '공통된 경험 특성을 가진 사용자(Persona)'를 정의하여 그들의 이용행태와 동기, 니즈, 태도 등을 서술하게 하는 방법임
세부활동
1. 페르소나(Persona) 분류 및 정의
목표
사용자들이 제품/서비스에 대해서 중요시 여기는 가치(니즈의 중요도에 따라 어떤 영역에 가치를 두는지 분석)에 따라서 사용자를 구분하여 정의함
활동
TIP
잘 만들어진 페르소나(Persona)는 누가 우리 제품/서비스를 이용하는지, 이용 특성에 따른 사용자 유형을 쉽고 명쾌하게 이해할 수 있도록 도움
잘못 만들어진 페르소나(Persona)는 있으나 마나 한 군더더기에 불과하며 통계분석을 통해 나온 결과를 그대로 반영할 뿐임
2. 페르소나(Persona) 작성
목표
정의된 페르소나(Persona)들을 서술하는 문서를 작성함
페르소나(Persona)에 대한 최종적인 산출물 형태가 됨
작성내용
(밑줄은 필수항목)
** 참조서식, 페르소나
출처 : UX1, UX Consultant 과정 中 발췌
TIP
사용자들의 특징과 차이가 분명해야 하며, 실제 사용자처럼 느껴져야 하며 모든 사용자를 포괄해야 하며, 의사결정에 영향을 미치는 시사점이 있어야 함
잘 만들어진 페르소나(Persona)에는 각 페르소나(Persona)별 특징과 이용동기, 이용 시나리오, 니즈와 고민점(Pain Points)등이 자연스럽게 녹아들어 있음
잘못 만들어진 페르소나(Persona)에 대한 묘사는 억지스러우며, 구체적이지 못하고 이미 알고 있는 사실을 정리했을 뿐임
3. 페르소나(Persona) 활용
목표
정의된 페르소나(Persona)를 이후 이루어지는 UX 디자인 작업에 활용하여 주요 의사결정과 상세 디자인 수행에 활용함
활용분야
TIP
잘 만들어진 페르소나(Persona)는 '시장 매력도 분석(마케팅)'보다 더 큰 통찰을 제시하며, 어떤 페르소나(Persona)가 가장 매력적이며 성장 가능성이 높은지 판단할 수 있음
잘못 만들어진 페르소나(Persona)는 통찰도 얻을 수 없고 의사결정도 내리기 어려움, 어떤 경우에는 '시장 매력도 분석'과 거의 비슷해서 '이 작업을 왜 해야하는지 조차 헷갈리는' 경우도 있음
맥락적 인터뷰(Contextual Interview)
어피니티 다이어그램(Affinity Diagram)
컨셉 모델 정의
컨셉모델은 여러가지 추상적인 컨셉들 사이의 관계를 보여주는 다이어그램임
다양한 아이디어들을 간편하게 시각화하여 표현할 수 있는 유용한 방법으로 아이디어를 잘 전달하는 것 뿐만 아니라 생각의 과정을 효율적으로 이끌어 줌
또한 문서의 작성자에게뿐만 아니라 문서를 활용하는 사람들에게도 그 프로젝트를 시작하기까지 생각해본 적 없었던 복잡한 아이디어들과 관계들을 고민해볼 수 있는 기회가 됨
세부활동
1. 컨셉 모델 정의
목표
컨셉모델은 여러가지 추상적인 컨셉들 사이의 관계를 보여주는 다이어그램으로, 서비스/제품을 기획할 때, To-Be모델을 가시화해서 검토하기 위해 정의함
활동
Flickr의 컨셉모델
참조 : http://www.flickr.com/photos/bryce/55749985/sizes/o/
상단의 사용목적이 표현되어 있으며, 각 객체(Flickr User, photos, Subject)가 다른 사용자 그룹이나 컨텐츠에 어떻게 녹여지고 사용될 수 있는지 그 아래에 텍스트 /이미지/도형 /선을 이용하여 잘 표현되어 있고, 그 흐름들이 유기적으로 얽혀있음
각 흐름에서 사용자 위치와 사용가능한 행동이 자세하게 묘사되어 있음 자세한 묘사는 프로젝트 관련자들의 커뮤니케이션을 원활하게 함
브레인스토밍 (Brain Storming)
어피니티 다이어그램(Affinity Diagram)
사용자 요구사항 정의
리서치 및 페르소나(Persona)결과물을 토대로 요구사항을 도출하고 여과하여 요구사항의 우선순위를 정함
페르소나(Persona)를 중심으로, 우선순위를 중심으로, 시나리오를 중심으로 요구사항을 정의할 수 있음
세부활동
1. 요구사항 매트릭스 작성
목표
다양한 경로를 통해 수집된 직접적인 요구사항을 검토하여, 페르소나(Persona)의 목적을 기준으로 데이터 니즈, 기능 니즈, 제품 품질, 제약 요인으로 요구사항 매트릭스를 작성함
요구사항 요소
[요구사항 매트릭스]
자료 | 데이터니즈 | 기능니즈 | 제품품질 | 제약요인 | |
---|---|---|---|---|---|
1순위 페르소나 (Primary User Group) |
시나리오 멘탈모델 목적 환경 기술과 능력 |
||||
2순위 페르소나 (Secondary User Group) |
|||||
이해관계자, 경쟁자, 규제 등 |
2. 정황시나리오 제작
목표
정황 시나리오(Contextual Scenario)는 요구사항 정의에 사용되는 초기 시나리오를 말하며, 높은 수준, 낙관적이면서도 발생 상황에서의 이상적인 시스템 동작에 초점을 맞춤
제품/서비스가 어떤 모습을 가져야 하는지 상상하는 첫번째 활동으로, 페르소나(Persona) 관점에서 시나리오를 작성함
활동
유즈케이스, 유저스토리, 정황 시나리오
유즈케이스는 행위자와 시스템 사이의 인터랙션을 묘사하며, 일반적으로 다이어그램형식으로 묘사됨
사용자들이 인터랙션에 대해 어떻게 느끼는지 또는 왜 특정 동작이 바람직한지 다루지 않으며, 또한 페르소나(Persona)를 이용하지 않음
유저스토리는 스크럼(Scrum) 등에서 사용되며, 시나리오와 비슷하게 보이지만 요구사항에 가까움. 사용자의 작업 흐름을 처음부터 끝까지 묘사하지 않음
시나리오는 사용자가 최종 목표를 달성하기 위한 방법을 순차적으로 묘사함
3. 정황 시나리오로부터 요구사항 도출
목표
정황 시나리오 리스트를 토대로 상세히 작성된 개별 시나리오로부터 관련 요구사항을 작성함
시나리오 외의 다른 자료(멘탈모델, 목적, 환경, 기술과 능력, 비즈니스 및 다른 니즈, 이해관계자, 규제, 경쟁자, 접근성, 지속가능성 등)으로 부터 요구사항을 도출함
[ 정황 시나리오 리스트 도출 예시 ]
제품 | 페르소나 | 시나리오 | |
---|---|---|---|
이메일 시스템 | 간단한 니즈를 지닌 시스템 관리자(1순위 관리자) |
- 시스템 설정 - 계정 추가 |
- 설정 변경 - 계정 삭제 |
모바일 이메일 사용자(2순위 최종 사용자) | |||
- 원격 사용 |
** 출처 : 인간중심 UX디자인, 킴굿윈, 에이콘출판사
[ 시나리오에서 요구사항 도출하는 과정 예시 ]
시나리오 | 요구사항 |
---|---|
긴 회의가 끝난 후 앤은 PA(Personal Assistant)를 꺼냈다. 그녀가 조치해야 할 항목들을 기록하고 다음 회의 장소를 확인하는 한편, 지난 두시간 동안 중요한 일이 발생했는지 살펴봐야 했기 때문이다. |
- 문자를 입력할 수 있어야 한다. - 약속을 추적할 수 있어야 한다. - 메시지의 리스트를 볼 수 있어야 한다. - 휴대 가능한 폼 팩터 |
** 출처 : 인간중심 UX디자인, 킴굿윈, 에이콘출판사
시나리오(Scenario)
*어피니티 다이어그램(Affinity Diagram)
UI 컨셉션
정리된 요구사항을 바탕으로 UX전략에 따라 구체화하는 단계로, 화면 디자인 단계 전에 대표 화면 설계를 진행하는 단계임스케치로 정리되는 페이퍼 프로토타입(Paper Prototype)부터, 시연이 가능한 디지털 프로토타입(Digital Prototype)까지 프로젝트에 맞게 선택적으로 진행함UX전략을 실제 구현하여, 사용자들의 컨셉 수용성과 사용성을 검토한 결과물을 토대로 실제 개발을 위한 상세 화면 설계로 진행됨
세부활동
1. 정보구조(Information Architecture) 설계
목표
정보 구조화와 분류 체계를 수립, 사용자 요구사항을 토대로 기능 구조를 도출, 메뉴 구조를 작성하고 네비게이션과 레이블링을 정의함
활동
2. 대표화면 와이어 프레임 스케치
목표
인터페이스 디자인이 시각적으로 구체화하기 위해 와이어프레임(대표적인 화면들에 포함되는 정보, 인터페이스 요소, 그들의 레이아웃)을 대략적으로 스케치함
설계원칙
** 참조서식, 와이어프레임 스케치
TIP
와이어 프레임 스케치 전, 공통적인 인터페이스 요소(예: 옵션버튼, 체크박스, 텍스트 입력필드 등)가 정의되어 있지 않다면 먼저 그것부터 설계해야 함
와이어 프레임 스케치를 토대로 주요 화면의 디자인이 결정되므로 하나의 디자인만 스케치하기보다는 여러 디자인 안을 스케치해서 비교하는 것이 좋음
사용자 요구사항과 UI설계 원칙을 함께 고려하여 설계해야 함(iOS나 Android OS 기반의 앱을 개발하는 경우, 애플과 구글의 사용자 인터페이스 가이드라인을 따르면 됨)
3. 페이퍼 프로토타입(Paper Prototype)을 통한 스토리보드 설계
목표
인터랙션을 고려하여 주요 흐름(Key Flow)을 스토리보드 형태로 그림
UI 컨셉션의 결과물을 사용자에게 평가받아 신속하게 문제점을 발견하고 개선하는 것이 중요함하지만 대표화면 와이어프레임만으로는 인터랙션 상의 문제점을 발견하기 어려워 페이퍼 프로토타입(Paper Prototype)평가를 활용함
제품/서비스 개발 초기에 별도의 하드웨어나 소프트웨어를 사용하지 않고도 제품의 디자인 컨셉, 사용성, 기능 동작 등을 빠르고 반복적으로 검증하는데 활용됨
활동
TIP
페이퍼 프로토타입(Paper Prototype)을 활용할 수 있는 단계는 디자인 컨셉 결정 단계, 인터랙션 디자인 과정에서 사용성 문제를 파악하는 단계에 활용 가능함
UI컨셉, 기능/버튼 배치, 요구정보, 레이블, 피드백 적합성 등을 신속하게 평가하는 데 유용함
개발팀 간 혹은 개발팀과 고객 간 의사소통을 원활하게 해줌
카드 소팅(Card sorting)
페이퍼 프로토타입(Paper Prototype)
GUI 컨셉션
와이어프레임 스케치와 함께, 화면 디자인의 시각적 컨셉을 설명하기 위한 작업으로, 컨셉 단계에서의 GUI 디자인은 참고 이미지, 벤치마킹 이미지 등을 활용하여 무드보드로 표현하여 이해를 도움, 경우에 따라 시안을 제작하기도 함
세부활동
1. GUI 이미지 무드보드 제작
목표
화면 디자인의 시각적 컨셉을 설명하기 위한 작업으로, 레이아웃, 타이포그래피, 참고 이미지 등을 활용하여 디자인 개발 컨셉을 표현, 개발방향성의 이해를 도움
활동
[ UX전략에 따른 화면방향 설정 ]
출처 : http://cfile201.uf.daum.net/image/2029544950C9D97535BF0D
[ 이미지 무드보드 예시 ]
출처 : http://wireframes.linowski.ca/wp-content/themes/darwin/images/full70.jpg
** 참조서식, 무드보드
벤치마킹
무드보드
시안 디자인(Concept Design)
설계 및 구현
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
UI 상세 설계 | UI 상세 설계 | UI 시나리오 문서 |
- 단계 시작 전 UI/UX전략의 참여인력간 공유 - 사용자 관점의 UI설계 - 규격화된 문서 작성 - 커뮤니케이션 오류 검토 - 단계 종료 후 UI/GUI 개발의 UX전략 일관성 검토 |
GUI 화면 디자인 | GUI 템플릿 제작 및 화면디자인 GUI 가이드 문서 작성 |
GUI 스타일 가이드 GUI 화면 디자인 |
- GUI 디자인의 차별성 |
UI/GUI 검증 | UI/GUI 시연을 통한 사용성 검토/검증 | GUI 가이드 문서 사용성 검토 보고서 |
- GUI 가이드문서의 명확성
- 적절한 테스트 방법, 평가대상자 선정 |
UI 상세설계
UX 컨셉션 단계에서 작성된 UI 컨셉션의 결과물(UI 설계시안)을 토대로 실제 설계 및 구현을 위한 모든 화면에 대한 UI 상세 설계 단계를 진행함
UI 시나리오 문서는 사용자 인터페이스의 기능구조, 대표화면, 화면간 인터랙션 흐름, 그리고 다양한 상황에서의 예외 처리방식 등을 문서로 정리한 것임 '효율적인 UI관리'와 그래픽 디자이너, 소프트웨어 개발자, 품질 관리자 등 다른 개발자들과의 '원활한 의사소통' 을 위한 것임
세부활동
1. UI 시나리오 문서 작성
활동
** 참조서식, UI 시나리오_스토리보드
[ UI 시나리오 문서를 위한 일반 규칙 정의 ]
주요 키의 위치와 기능 | 화면상에 공통적으로 배치되는 주요 키의 위치와 기능을 설명한 것으로 여러 화면간의 일관성을 보장하기 위한 것 |
---|---|
공통 UI 요소 | 체크박스, 라디오 버튼, 스크롤바, 텍스트 입력필드, 상하/좌우 휠, 모드설정, 탭, 팝업 등의 각 UI 요소를 언제 사용하며 어떤 형태인지 정의하고 사용자의 조작에 어떻게 반응하는지 상세하게 그 흐름을 설명한 것 |
기본 스크린 레이아웃 (Basic Screen Layouts) |
여러 화면 내에 공통적으로 나타나는 Indicators, Titles, Ok/Back, Soft Key, Option, Functional Buttons등의 위치와 속성을 정의한 것으로서 여러 기능들 간에 화면 레이아웃의 일관성을 보장하기 위한 것 |
기본 인터랙션 규칙 (Basic Interaction Rules) |
터치 제스처 등의 공통적으로 사용되는 조작의 방법, 홈키의 동작방식과 같은 운항규칙, 실행, 이전, 다음, 삭제, 이동 등의 화면 전환 효과 등에 대해 기술한 것 |
공통단위 태스크 흐름 (Task Flows) |
많은 기능들에 공통적으로 자주 나타나는 삭제, 검색, 매너모드 상태에서의 소리 재생 등의 인터랙션 흐름을 설명한 것 |
케이스 문서 | 다양한 상황에서의 공통적인 시스템 동작에 대해 정의한 문서 (ex. 사운드, 조명, 이벤트 케이스 등) |
2. UI 시나리오 문서 작성의 팁
Complete(완전성)
(누람 됨이 없이) 완전해야 함
최대한 빠진 것이 없도록 가능한 상세하기 기술함
시스템 기능보다 사용자의 태스크에 초첨을 맞춰 기술함
Consistent(일관성)
(서비스 목표/시스템/사용자요구사항과) 일관성이 있어야 함
문서마다의 UI스타일(Flow or Layout)을 일관되게 구성함
Understandable(이해성)
(처음 접하는 사람도) 이해하기 쉽도록 구성하고 설명함
애매모호하거나 추상적인 표현이나 이해하기 어려운 용어의 사용은 지양함
Readable(가독성)
문서를 쉽게 읽을 수 있어야 함(문서 템플릿과 타이포 그래피)
표준화된 템플릿을 제정하여 적용함(회사마다 고유 문서양식 정의)
일관성 있는 버전 넘버링(예 v1.0, v2.1.1등), 문서인덱스 규칙 적용, 목차 제공 중요함
충분한 줄간격 유지, 단락구분과 들여쓰기 기준을 적용하여 읽기 편하게 해야 함
적절한 여백/빈 페이지 활용 등으로 여백의 미를 살리면 좋음
시각적인 하이라이팅을 일관성 있게 활용해야 함
파워포인트의 상호참조(Cross-referencing) 기능 (예:하이퍼링크 등)을 활용함
Modifiable(수정 용이성)
변경이 용이해야 함
수정/개선 사항을 시나리오에 반영하는 것이 수월해야 함
하나의 동일한 사항 수정을 위해 문서 여기저기를 편집해야 하는 것은 좋지 않음
Traceable(추적용이성)
추적이 가능해야 함
어떤 변경사항들이 언제, 어떤 부분들에, 왜 발생했는지 추적이 용이해야 함
모범적인 UI시나리오 문서의 효과
요구사항 오류의 감소
의사소통 오류의 감소
개발과정에서의 재작업 감소, 혼선 최소화
불필요한 기능의 최소화
시나리오 작성과 소프트웨어 개발 비용 절감
개발속도 향상
유관부서 만족도 제고
3. UI검토(Iteration)
목표
UI 상세 설계 단계에서 사용성에 대한 반복적인 검토를 통해 완성도 높은 UI 상세 설계를 수행함
UI 스토리보드를 활용하여 페이퍼 프로토타입 평가를 통해 짧은 단위로 개발, 평가, 보완을 반복함
활동
GUI 템플릿 제작 및 화면 디자인
화면 디자인에 활용될 레이아웃, 컬러 패턴, 타이포그래피, 화면 디자인 요소 등을 정의하는 단계임
템플릿 제작을 통해 페이지 전체적으로 통일감 있게 만드는 것이 기본적인 목표이며, 잘 정의된 템플릿을 통해 소프트웨어의 시각적 아이덴티티를 가질 수 있음
레이아웃과 함께 타이포그래피도 템플릿의 중요한 요소임
화면디자인에 반복적으로 사용될 요소를 미리 디자인하여 활용함으로써, 팀 작업시 많은 페이지를 디자인하는 환경에서 일관성을 지킬 수 있음
세부활동
1. GUI 스타일 가이드 제작
목표
스타일가이드는 일관성 있는 화면 디자인을 위해 레이아웃, 컬러패턴, 타이포그래피, 화면 디자인 요소들을 팔레트처럼 미리 정의하여 반복적으로 활용하기 위한 것임
활동
TIP
개발자에게 주요 컨셉과 디자인 원칙, 패턴을 효과적으로 전달하려면 디자인 문서가 필수적임
최종 결과물을 바탕으로 제품 구현 과정을 함께 지켜보고 지속적으로 의견을 주고 받아야 함
[GUI 스타일 가이드 예시 ]
참조 : http://baekhorang.tistory.com/entry/XFile
2. 세부화면디자인
목표
UI 시나리오 문서를 토대로 GUI 스타일가이드와 템플릿 디자인을 활용하여 전체 페이지에 대한 화면 디자인을 수행함
일관성 있게 스타일가이드를 적용하여, 팀 작업 및 추후 수정시 오류를 최소화함
GUI 디자인 원칙을 숙지하여, 사용성이 잘 적용된 화면디자인을 수행하도록 함
[ 애플이 제시하는 10가지 디자인 원칙 ]
메타포 | 메타포를 활용하여 개념과 특징을 전달할 수 있도록 디자인, 메타포의 활용은 문화적, 언어적 장벽들을 자연스럽게 극복하게 해준다. |
---|---|
수행활동 | 사용자로 하여금 객체를 직접 제어하고 있는 느낌을 가지도록 한다. 사용자는 자신의 행동으로부터 물리적인 결과를 기대할 뿐만 아니라 반응이 나타나기를 바란다. |
보고 선택하기 | 사용자가 기억에 의해 행동하지 않고, 인지를 통해 행동하도록 한다. |
반응과 대화 | 사용자에게 시스템이 무슨 일이 일어나고 있는 지를 계속 알려주어야 한다. 가능한 한 즉각적으로 시각적 혹은 청각적으로 반응을 제공한다. |
관대함 | 관대함을 기본적으로 제작해, 시스템에 손상을 주지 않으면서 편안하게 작업하도록 지원하여야 한다. |
정보를 시각적으로 표현 | 정보를 잘 조작하여 시각디자인 원칙에 일치하도록 표현한다. 너무 복잡하거나 사용자에게 부담을 주는 표현은 적절하지 않다. |
사용자에 대한 이해 | 사용자로 하여금 프로토타입과 개발될 제품들을 테스트하도록 한다. 컴퓨터의 능력이 아닌, 사용자와 사용자 능력을 염두에 두어야 한다. |
접근 가능성 | 개발자가 상상한 평균 사용자와의 다른 대상 층을 염두에 두어야 한다. 제품 개발 시작 단계부터 대상 사용자의 문화적, 언어적 요구와 기대사항에 유의해야 한다. |
조직성 | 사용자에게 일관성 있는 개념적 구조를 제공하도록 한다. GUI 디자인에서 일관성, 스크린 레이아웃, 항해성 등의 하부원칙들이 지켜져야 한다. |
경제성 | 최소한의 실마리로 효율을 극대화 하는 것으로, 경제성의 개념은 간결성, 명료성의 하부 원칙과 함께 중요 정보를 다른 정보와 차별화시키고 강조함으로써 달성된다. 간결성이란 디자이너가 커뮤니케이션을 위해 꼭 필요한 요소만을 디자인하는 것을 의미한다. |
3. GUI 검토 (Iteration)
목표
GUI 화면 디자인 단계에서 디자인 선호도 및 디자인 품질을 검증하여, GUI 가이드문서 작성 후 디자인 수정에 따른 반복적인 가이드문서 작성 작업을 최소화함
GUI 화면 시안 또는 시뮬레이션(플래시 등을 활용하여 화면의 동작을 구현한 버전)을 활용한 고수준 프로토타입 평가를 통해 짧은 단위로 개발, 평가, 보완을 반복함
활동
GUI 가이드 문서 작성
최종 확정된 화면디자인문서를 개발팀에 이관하기 위해 작성함
개발에 관련된 컬러, 폰트, 이미지 슬라이스, 이미지 및 여백에 대한 좌표값, 크기 정의 등을 문서화 함
1.0버전이 배포된 후, 개발이 진행되면서 발행하는 UI 수정 사항, GUI 수정 사항들을 지속적으로 반영하는 유지보수작업을 진행함
세부활동
1. GUI 가이드문서 작성
목표
확정된 화면 설계 및 디자인을 적용하여 개발팀에 전달하게 되는 최종 데이터를 작업하는 단계임
개발이 진행되면서 개발부서의 설계변경에 따른 디자인 수정사항을 지속적으로 수정, 반영하여 개발팀에 전달할 때, 데이터의 정확도와 적절한 설명을 통한 원활한 커뮤니케이션을 위해 정확한 GUI 가이드 문서 작성이 필요함
활동
** 참조서식, GUI 가이드문서
[ GUI 가이드문서 예시 ]
출처 : http://www.jjim.com/v7/files/201103/130132330007.jpg
UI/GUI 시연을 통한 사용성 검토/검증
소프트웨어의 개발이 진행되면서, 스크린별 레이아웃과 대부분의 인터랙션이 적용된 고수준(High-Fidelity)의 프로토타입을 이용하여 내부 개발자, 전문가 평가 등을 통해 지속적인 UI 사용성 평가와 GUI 디자인 평가를 진행하여 개선사항을 반영함
세부활동
1. 사용성검토, 결과 분석 및 수정사항 반영(Iteration)
목표
고수준(High-Fidelity)의 프로토타입을 활용 소프트웨어 개발과정 중 내부 개발자 및 전문가를 활용한 사용성 검토를 수행하면서 프로토타입에 대한 다양한 의견들을 수집, 분석하여 최종 개발에 반영함
활동
TIP
설계가 변경될 수 있다는 점을 미리 고려, 가능한 경우 몇 가지 안을 미리 만들어 사용자 테스트 시에 제공하는 것이 좋음
성능(Performance) 평가, 선호도(Preference) 평가 등 평가항목에 적합한 평가방법을 수행함
http://uxmovement.com/wp-content/uploads/2012/11/image02.png
고수준(High Fidelity) 프로토타입 평가
*휴리스틱(Heuristic) 평가
*선호도(Preference) 평가
*성능(Performance) 평가
테스트
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
사용성 테스트 계획 수립 | 사용성 테스트 계획 수립
사용성 테스트 설계 |
사용성 테스트(UT) 계획서 |
- 적절한 테스트방법, 평가대상자 선정 - 단계 시작 전 UI/UX전략의 참여인력간 공유 |
사용성 테스트 수행 | 사용성 테스트 수행 | ||
사용성 테스트 결과 분석 | 사용성 테스트 결과 분석 | 사용성 테스트(UT) 분석서 | - 사용성 테스트(UT) 분석서 |
사용성 테스트 계획 수립
소프트웨어 최종 배포전 일반 사용자를 대상으로 SW의 사용성을 검증하는 사용성 평가에 대한 계획을 수립하는 단계임
전문가가 아닌 일반인 사용자를 대상으로 적절한 테스트 방법과 평가 대상자를 선정함
테스트 시나리오 및 테스트 케이스를 체크하면서 효과적인 사용성 테스트 계획을 수립함
세부활동
1. 사용성 테스트 계획 수립
목표
사용성 테스트의 목표,도구, 방법을 명시함
이 테스트에서 무엇을 얻어야 하는가? 테스트를 어떻게 진행할 것인가? 테스트 중에 무엇을 물을 것인가? 에 대해 계획함
소프트웨어 최종 배포전 시행하는 평가로, 프로젝트 초기에 사용성 평가를 수행했다면 비교평가를 통해 개발개선정도를 평가하는 계획을 수립할 수 있음
활동
** 참조서식 : 사용성 테스트 계획서
사용성 평가 계획서 작성항목 예시
출처 : 댄브라운, UX DESIGN COMMUNICATION, 위키북스, 2009
2. 사용성 테스트 설계
목표
일반적이고 추상적인 테스트의 목적을 구체적인 상황과 테스트 케이스로 변환함
활동
사용자 프로파일(예시)
개인이력 |
나이 성별 컴퓨터에 대한 우호 정도 오른손/왼손잡이 여부(마우스 사용에 영향을 줄 수 있는 요인) 학습스타일(직접 경험을 통해 배우는 것을 선호하는지, 독서를 통해 간접적으로 배우는 것을 좋아하는지 등) |
---|---|
학력 |
최종 학력 수강과목 전공 |
컴퓨터 경험 |
사용시간 사용빈도 사용기종/장치 사용 OS(Operating System) 사용한 스크린 인터렉션 종류(GUI, DOS) |
제품 경험 |
사용시간 사용빈도 수행한 과업의 종류 및 빈도 회사 제품의 사용자 여부 |
직업 이력 |
현재 및 이전 직종 담당업무 이수한 직업교육 현재 직장 복무 기간 |
** 출처 : UX1, UX Consultant 과정 중 발췌
사용성 테스트 수행
테스트 계획 수립 단계에서 작성된 계획서와 설계서를 토대로 실제 사용성 테스트를 수행하는 단계임
사용성 테스트는 효율성과 정확성, 기억, 감성적 반응에 따라 적절한 방식을 선택하여 진행하고 참가자들에게는 최대한 부담이 가지 않도록 테스트를 진행함
세부활동
1. 테스트수행
목표
아래의 항목들에 대해 분석 할 수 있도록 태스크 수행을 통한 사용성 테스트를 진행함
효율성 : 얼마나 시간이 걸리며, 몇 개의 단계를 거쳐서 태스크가 완료되는가?
정확성 : 사용자들이 얼마나 에러를 일으키는가? / 치명적인 에러와 복구가 가능한 에러 중 어떤 에러인가?
기억 : 사용 후 또는 한동안 사용하지 않은 다음에 얼마나 많은 것들을 회상해 낼 수 있는가?
감성적 반응 : 태스크 완료시 사용자들이 받는 감정은? / 긍정적인 경험이 다른 이들에게까지 전파되는가?
활동
TIP
사전 인터뷰를 진행하여 사용자의 경험과 지식에 대해 파악함
테스트룸과 관찰룸을 구분함
사용성 테스트 진행시 사용자가 자신의 의사를 자유롭게 표현할 수 있도록 유도함
모든 테스트 시나리오 후 사용만족도 수준을 측정함
휴리스틱 평가(Heuristic Evaluation)
1:1 사용자 테스트(User Test)
심층인터뷰(In-depth Interview), 포커스 그룹 인터뷰(Focus Group Interview)
상태전이 다이어그램(STDS, State Transition Diagrams)
온라인 설문(Online Survey)
사용성 테스트 결과 분석
테스트 결과 데이터들을 취합하여 분석하는 단계로 전문 툴들을 이용하거나 직접 비디오를 판독하면서 사용자 반응을 체크함
분석된 데이터는 문서화하여 가이드 자료로 활용하거나, 수정/보안 또는 향후 적용계획에 반영하도록 함
세부활동
1. 사용성 테스트 결과분석
목표
테스트 결과 데이터들을 취합/분석하여 객관적이고 정량화된 값을 도출함
결과 및 진행 상황을 한 눈에 파악 할 수 있도록 하여 문서화를 통한 지속적인 자료로 활용이 가능하도록 정리함
활동
[ 수행 매트릭스 ]
태스크 성공 |
태스크가 포함되어 있는 사용성 연구에서는 항상 계산할 수 있는 태스크 성공은 가장 일반적이고 보편적인 매트릭스임 |
---|---|
태스크 시간 |
시간 기반 태스크는 어떤 제품에서건 효율성을 측정할 수 있는 방법이며, 태스크 완료 시간 또는 단순히 태스크 시간이라고 하기도 함. 대부분 사용자가 태스크를 더 빠르게 완료할수록 더 나은 경험이라 할 수 있으며, 사용자가 기대했던 것보다 짧은 시간 내에 태스크를 완료하는 일은 일반적이지 않음. 테스트 진행자가 스톱워치로 기록하거나, 자동화 툴(Ego Browser, Data Logger, Bailey의 Usability Testing Environment등)을 사용하는 방법, 사용자가 시계 끄고 켜기 방법 등으로 데이터를 수집함 |
에러 |
태스크를 수행하는 동안 사용자가 범한 실수를 수집하여 분석하는 기법으로, 태스크 진행중 얼마나 많은 실수가 있었는지, 이러한 실수가 제품의 어느 부분에서 발행했는지, 디자인에 따라 어떤 종류의 에러가 얼마나 자주 일어나는지, 일반적으로 무엇이 어떻게 유용한지에 대해서 말해줄 수 있음 에러로 인해 데이터가 손실되는 등 효율성에서 중대한 손실을 가져올 때용 에러로 인해 고객센터로 걸려오는 통화량이 증가되는 등 많은 비용을 발생시킬 때 에러가 태스크의 실패를 야기할 때 |
효율성 |
효율성 매트릭스는 태스크를 완료하기 위해서 걸리는 시간뿐 아니라 인지적 노력과 물리적 노력의 양을 중요하게 여길 때 효과적임. 효율성은 흔히 태스크를 완료하는 데 필요한 단계나 행동의 개수에 의해 측정됨, 또는 태스크마다 걸린 평균 시간과 태스크 성공율의 비율에 따라 측정되기도 함 |
학습성 |
학습성은 효율성 매트릭스가 시간이 지남에 따라 어떻게 변하는지를 살펴보는 것임, 참여자들이 언제 어떻게 제품을 사용하는 데 익숙해지는 조사할 때 유용함 |
유저빌리티 매트릭스(수행 매트릭스 , 이슈기반 매트릭스, 자가기록 매트릭스)
배포 및 관리
수행항목 | 수행활동 | 산출물 | 체크리스트 |
---|---|---|---|
사용자 중심 매뉴얼 작성 가이드 개발 | 사용자 중심 SW 매뉴얼 작성가이드 개발 | 메뉴얼 작성 가이드 | 실사용자의 메뉴얼 이해도 |
UX 요구사항 수집 | UX 요구사항 수집 | 사용자 피드백 보고서 | 사용자 피드백의 지속적인 수집 및 체계적인 정리 |
사용자 중심 매뉴얼 작성 가이드 개발
소프트웨어의 배포 및 관리를 하기 위한 매뉴얼의 작성가이드를 개발하는 단계임
개발자 관점(기능 위주)으로 작성된 매뉴얼을 사용자 중심으로 재구성하여 활용도를 높이고, 소프트웨어의 이해도를 높이도록 함
세부활동
1. 매뉴얼 작성 가이드 개발
목표
기능 설명 위주의 매뉴얼이 아닌 사용자 관점으로 작성된 태스크 위주의 매뉴얼로 재구성하여 활용도를 높이고, 소프트웨어의 이해도를 높이도록 함
사용자의 소프트웨어 이해도 향상으로 소프트웨어 사용 오류를 최소화하고 잦은 오류 발생에 따른 AS 비용을 최소화할 수 있도록 함
활동
출처 : Mobico, 'Technical Writing'
UX 요구사항 수집
배포된 소프트웨어에 대하여 사용자의 지속적인 피드백 수집 및 체계적인 정리 단계임
개발자 및 판매자가 아닌 사용자 위주로 정보를 수집하기 위하여 고객센터로 들어오는 VOC(Voice of Customer)들을 중심으로 정보를 수집함
세부활동
1. 사용자 피드백의 지속적인 수집
목표
고객 대응 부서, 영업팀 등으로 들어오는 다양한 사용자의 불만사항, 요구사항을 지속적으로 수집 및 유형화하여 체계적으로 정리함
개발자 또는 판매자, 구매자가 아닌 실사용자의 요구사항을 수집함
활동
TIP
대규모의 사용자 리서치를 항상 수행하기 어려운 중소기업에서 활용할 수 있는 방법임
이 때 수집된 사용자 피드백의 유형을 토대로, 신규 개발 또는 리뉴얼 시 개선 필요 사항 도출에 활용할 수 있도록 함
출처 : http://www.slideshare.net/june820/4-voc