Designing the User Interface

Presentation on theme: "Designing the User Interface"— Presentation transcript:

1 Designing the User Interface
Chapter 7 Menu Selection, Form Fillin, and Dialog Boxes

2 1조 정선희 선소정 오준식 유수희

3 7. Menu Selection, Form Fillin, and Dialog Boxes
7.1 Introduction 7.2 Task – Related Menu Organization 7.3 Single Menus 7.4 Combination of multiple menus 7.5 Content Organization 7.6 Fast Movement Through Menus 7.7 Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives 7.8 Audio menus and menus for small displays

4 7.1 Introduction 과거-풀 스크린 메뉴 현대-풀다운 메뉴, 체크박스 , 문답박스 등
메뉴 아이템 : 친숙한 전문용어, 편리한 구조와 배열 메뉴는 이용자의 인식을 끌어내는 단서를 제공하기 때문에 효과적이다.  간단한 메뉴선택- 이용자가 약간의 훈련이 되어 있는 경우 - 단속적으로 인터페이스를 사용할 때 - 전문용어에 정통하지 않을 때 - 의사결정의 과정들을 구조화하는데 도움이 필요할 때

5 효과적인 인터페이스 효과적인 인터페이스는 업무와 관련된 조직처리, 아이템의 표현과 순서,
그래픽 레이아웃과 디자인, 전문적인 사용자를 위한 단축키, 온라인 도움, 에러 수정, 그리고 기계 (키보드, 포인트도구, 터치스크린, 목소리 등등)의 선택과 같은 수많은 디자인 이슈들을 위한 테스트, 그리고 주의 깊게 생각하고 또 고려한 후에서야 비로소 떠오르는 게 되는 것이다.

6 7.2 Task – Related Menu Organization
메뉴, form-fillin, 다이얼로그 박스 디자이너를 위한 주된 목표는 사용자의 업무와 관련된 분별 있고, 이해할 수 있으며, 기억하기 쉬운, 편리한 메뉴 조직을 창조하기 위한 것이다.

7 7.3 Single menus ⊙ 라디오 버튼 - 다수의 아이템 메뉴로부터 ☑ 체크 박스 - 메뉴에서 한 개 또는 단일 메뉴
이용자에게 두 개 또는 그 이상의 아이템 사이에서 한 개 혹은, 다수의 선택을 하는 메뉴 ☞가장 간단한 2항 메뉴 ex)여자-남자, 예-아니오, 진실-거짓 ⊙ 라디오 버튼 - 다수의 아이템 메뉴로부터 한 가지 아이템 선택을 제공 ☑ 체크 박스 - 메뉴에서 한 개 또는 그 이상 아이템의 선택

8 7.3.1 Pull-down Menus 평소에는 화면에 나타나지 않으나 작업 도중 필요한 메뉴 바를 누르면 메뉴 창이 열리면서 그 항목에 따르는 하위 메뉴 바가 나타나는 형식을 이른다. 보통 단축 메뉴의 형태를 가지고 있다.

9 7.3.1 Pop-up menus 평소에는 화면에 보이지 않다가 마우스나 특정 키로 조작하면 화면에 나타나 필요한 내용을 선택할 수 있도록 해 주는 메뉴. 윈도 환경의 프로그램에서는 마우스 오른쪽 버튼을 누르면 팝업 메뉴가 나타난다. 화면의 위에서 아래로 표시되는 풀다운 메뉴의 반대 개념이다.

10 7.3.1 Pie menus 선택이 보다 빠르고, 숙련이 되어있어 시각적 주의 없이 할 수 있다.

11 7.3.1 Toolbar menus 윈도우즈 응용 프로그램에서 자주 사용되는 명령어들을 아이콘 모양으로 만들어 놓은 영역. 일반적으로 윈도의 메뉴 표시줄 아래에 위치한다. 사용자는 도구 막대에 있는 아이콘을 클릭하는 것만으로 해당하는 명령어를 실행할 수 있다.

12 7.3.1 Keyboard shortcuts 단축키 전문가 이용자에게 중요 자주 사용하고, 상호작용의 속도를
상당히 올려야 하는 메뉴 아이템의 단축키를 암기 해야 함 ex) Ctrl-s 는 저장, Ctrl-p는 인쇄

13 7.3.2 Menus for long lists 아이템이 커서와 멀리 떨어져 있는 것은 더 작은 크기로 디스플레이 된다
☞한 번에 스크린 상에 모든 메뉴 아이템을 디스플레이함, 그러나 풀사이즈에서 커서와 가까이 있는 아이템만 보여줌.

14 7.3.2 Menus for long lists ☞텍스트 입력 항목과 스크롤 메뉴를 결합하여 명백한 옵션을 만든다.
이용자는 리스트를 통하여 스크롤하여 특성을 끌어내어 입력할 수 있다.

15 ☞ 메뉴 순서에서 화살표가 아이템의 다음 상태로 이끈다

16 7.3.2.4 Sliders and alphasliders
아이템이 숫자상의 가치의 범위가 존재할 때, Slider는 가치의 선택을 따르는 자연스러운 선택이다. 가치의 범위는 이중적 측면(범위)이 있는 Slider가 선택되어질 수 있다.  이용자 선택 규모에 따라서 Slider Thumb(스크롤박스)를 포인트 도구를 사용하여 드래그 함으로써 가치를 부여할 수 있다. Alphaslider 비슷한 도구로서 선택 옵션이 광대한 숫자로 보이는 메뉴를 위해 유용하게 사용할 수 있는 것.  Alphaslider는 Slider Thumb를 움직여 입상의 다수의 정도에 사용하고, 그러므로 수십 또는 수백의 수천의 아이템을 제공할 수 있다.

17 7.3.2. Two-dimensional menus
빠르고 광대한 2차원메뉴는 이용자에게 선택의 좋은 개요를 주고, 요구되는 행위의 수를 줄이고, 반복(중복)선택이 가능. 특히 웹 페이지 디자인에서 유용한데, 긴 목록을 볼 때 필요한 스크롤을 되도록 적게, 이용자에게 선택의 모든 상황의 단일 스크린 개요를 주기도 한다.

18 7.3.3 Embedded menus and hotlinks
삽입링크는 하이퍼다이즈(비순차적으로 연결된 상태)시스템에서 대중화가 되었고, 이것은 일찍이 상업적 하이퍼텍스트 프로젝트에서 사용되어졌었다. 삽입메뉴 : 맥락에서 보기 위한 아이템을 허락하고, 혼란 시키는 것들과 아이템의 면 낭비 목록을 제거하여 도움을 준다. 그래픽 메뉴 : 많은 선택 옵션을 제공하는 매력 있는 방법,이용자에게 그들이 선택할 수 있도록 맥락을 제공해주어 도움을 준다. 예) 지 도- 지역의 방향제시, 일정표- 이용도, 제한점 제시

19 7.4 Combination of multiple menus
7.4.1 Linear menu sequences and simultaneous menus 선형메뉴는 한가지 아이템에 대한 여러 항목을 한번에 하나씩 선택할 수 있는 메뉴이다. 선형메뉴는 사용자에게 한번에 한가지의 결정을 제공하며, 초보자가 간단한 임무를 수행하는데 효과적이다. 동시메뉴는 하나의 아이템에 대한 여러 항목을 결정할 수 있는 형식의 메뉴이며, 숙련된 사용자가 이용하기에 편리하다.

20 7.4 Combination of multiple menus
7.4.2 Tree-structured menus

21 7.4.2 Tree-structured menus
트리구조메뉴는 아이템의 종류가 많을 때 간단한 아이템으로 카테고리를 나누고 나무가 가지를 뻗듯이 하위 카테고리를 세분화 시켜서 나누는 형식의 메뉴를 말한다. 단점 : 디자이너가 분류한 것을 이용자가 수긍하지 않을 수도 있다. 분류작업 자체가 굉장히 복잡하다. 장점 : 초보자 혹은 이용빈도가 낮은 사용자에게 데이터의 커다란 컬렉션을 이용할 수 있도록 만들어주기에 적절하다.

22 7.4 Combination of multiple menus
7.4.3 Menu Maps 메뉴지도는 사용자가 트리구조 메뉴를 사용할 때 상위메뉴에서 하위메뉴로 지나온 과정을 보여주는 것이며 웹에서는 사이트 맵으로 보여진다.

23 7.4 Combination of multiple menus
7.4.4 Acyclic and Cyclic Networks 메뉴 네트워크는 트리구조 메뉴 안에서 각각 다른 분야간의 연결 경로를 만들어 준다. 예를 들어 상업온라인은 은행정보와 소비자, 금융분야를 메뉴를 통해 연결해주기도 한다. 네트워크 구조는 사회 각분야간의 상호작용 및 결속을 돕는다.

24 7.5 Content Organization 신중한 제목의 편집과 적절한 형태를 결정 짓는 것, 의미 있는 수집과 메뉴구성을 정하는 것은 메뉴를 더욱 효과적으로 볼 수 있게 하며 선택의 속도를 증가시킨다.

25 7.5.1 Task-related grouping in tree organization
트리구조 메뉴 형성의 몇 가지 법칙 유사한 아이템의 그룹을 형성하라. 예) 레벨1-국가, 레벨2-주, 레벨3-도시 모든 가능성을 담고 있는 그룹을 형성하라. 예) 나이를 나눌 때 0-9,10-19,20-29 이런 식으로 나누고 나머지는 30보다 크다라고 설정한다. 아이템을 겹치지 않게 하라. 예) 엔터테인먼트와 이벤트는 겹치므로 콘서트와 스포츠로 나눈다. 친숙한 언어를 사용하되 사용한 언어는 다른 것과 확실하게 구분이 되어야 한다. 예) 낮과 밤으로 나누는 것은 모호하므로 오전6시~오후6시와 오후6시~오전6시로 나누는 것이 더욱 효과적이고 알맞다.

26 7.5.2 Item Presentation Sequence
메뉴 안에서 아이템을 선택할 때 디자이너는 표현순서의 선택을 해야 한다. 순서를 정하는 가장 전형적인 방법은 시간의 순서, 수적 순서, 물리적 단위의 증감에 의한 순서 등이 있다. 아이템의 특징이 순서와 상관이 없을 때는 가능한 다음과 같은 사항들에 따라 순서를 결정해야 한다. ->알파벳 순서, 관련 아이템의 분류순서, 가장 자주 사용하는 아이템의 우선, 가장 중요한 아이템의 우선 등.

27 7.5.3 Menu layout -메뉴 설계에 대한 실험이 거의 없으므로 이 섹션은 경험적인 부분이 포함된 주관적 판단을 많이 포함하고 있다. 메뉴 선택의 길라잡이 메뉴의 종류를 결정한다. 메뉴의 범위를 점차 좁혀 나간다. 그림, 숫자, 타이틀에 의하여 위치를 보여준다. 의미 있게 아이템을 수집한다. 키워드를 사용하여 요약된 아이템을 사용한다. 조화로운 규칙과 형태를 사용한다. 진보적 방법을 선택하고 간단한 방법을 사용한다. 이전의 메뉴, 메인 메뉴로 바로 이동할 수 있게 한다. 스크린 사이즈, 그림, 규격 등을 온라인 상에서 사용하기 알맞게 한다.

28 7.5.3.1 Titles 싱글메뉴는 상황을 간단하게 묘사하는 것이 중요
-> 각각의 메뉴는 정확하게 그 영역에 대한 것을 표현 조화로운 규칙의 형태는 혼란을 줄인다. 모호하지 않은 단어는 효과적임 트리구조 메뉴의 경우 타이틀을 선정할 때 좀더 정확하고 상위적인 의미의 표현을 사용하는 것이 좋다. 예) ‘당신의 돈을 관리해드리겠습니다” ->‘비즈니스 앤 파이낸셜 서비스’ 상위의 표현을 사용하면 의미가 정확하기 때문이다.

29 Phrasing of menu items 메뉴가 영어단어나 문장, 문단으로 이루어져 있기 때문에 완벽한 이해를 보장할 수는 없다. -> 디자이너는 동료, 실험, 사용자 행태 조사 등을 통해서 유용하며, 친숙하고 유사한 용어를 사용한다. 그리고 이러한 리스트를 지속한다. 각각의 아이템은 다른 것들과 확실히 구분되어야 한다.

30 7.5.3.3 Graphic layout and design
스크린 폭과 길이, 디스플레이 비율, 문자 그리고 하이라이트 기술들은 메뉴의 그래픽 레이아웃에 강한 영향을 미친다. 일관된 체계는 사용자가 필요한 정보를 찾는 것을 돕고, 관련된 요소에 사용자의 주의를 집중하게 하고, 예시를 제공함으로써 사용자의 불안을 감소시킨다.

31 7.5.3.3 Graphic layout and design
메뉴 구성요소의 일관성을 위한 설계 지침 제목. 사람들은 제목이 들어가는 것을 선호 항목 배치. -항목 설명의 앞선 문자나 항목 번호와 함께 항목은 남겨둔다. -공백 라인은 항목의 의미 있는 그룹을 분리하기 위하여 이용됨 - 복합적인 다수의 단을 사용하게 되는 경우 : 번호나 문자의 일관된 형태가 사용되어야 한다. 지시. 지시는 각 메뉴에서 동일한 위치에 두어야 한다 ex)건너뛰기, 도움, 또는 기능키 사용법에 관한 지시 에러 메시지. 사용자가 틀린 선택을 하는 경우 사용됨 -일관된 위치에서 일관된 용어 및 구문을 사용해서 나타나야함 상태 기록. -메뉴 구조의 어느 부분이 지금 표현되고 있는지 나타냄 -일관된 구조로 일관된 위치에서 나타나야함

32 7.5.3.3 Graphic layout and design
추가적으로, 방향감각상실이 문제화될 가능성이 크기 때문에, 메뉴 구조에 있는 위치를 나타내는 기술은 유용할 수 있다 메뉴트리에서, 사용자는 트리 구조 아래로 내려감으로써 그 주제들을 주된 메뉴로부터의 관계와 수준을 디자인하고 표현함 Main Menu HOME SERVICES NEWSPAPERS The New York Times 위의 디스플레이는 트리 아래 진도의 분명한 암시를 나타낸다.

33 7.6 Fast Movement Through Menus
키보드 단축키 전문가의 사용을 지원한다. 연상기호를 사용하는 경우, 다른 외국어 번역에 신중을 기해야 한다. 웹 브라우저에서, 북마크는 사용자에게 목적지로 손쉽게 가는 방법을 제공한다. 사용자가 선정한 아이콘으로써 툴바에 두거나, 긴 메뉴로서 정기적으로 사용한 경로가 기록되도록 허용한다.

34 7.7 Data Entry with Menus: Form Fillin, Dialog Boxes, and Alternatives
메뉴 사용은 리스트에서 항목 선택을 위해 효과적이다. 그러나 몇몇 업무는 메뉴가 성가시고 (또는 불가능하다). 개인 이름의 데이터 입력이나 수치가 요구되는 경우에, 키보드 타자를 치는 것이 더 효과적이다. 형식기입 접근은 정보의 전체적인 조화를 볼 수 있기 때문에 매력적이며, 사용자는 대화상자를 컨트롤을 할 수 있음을 느낄 수 있다.

35 7.7.1 Form Fillin Form-Fillin Design Guidelines 의미 있는 제목 이해할 수 있는 지시
논리적인 분류하고 연속 모양의 시각적으로 매력적인 배치 친밀한 분야 라벨 일관된 용어 및 요약 데이터 기재 분야를 위한 눈에 보이는 공간 그리고 경계 커서 움직임 개인적인 특성 및 전체 분야를 위해 에러 수정 가능한 한 에러 방지 용인할 수 없는 가치를 나타내는 에러 메시지 선택입력필드 표시하기 분야를 위한 설명적인 메시지 사용자 통제를 지원하는 완료 신호

36 7.7.2 Format-specific field
Coded fields 전화번호. Telephone: (_ _ _) _ _ _ - _ _ _ _ 다만, 국제적인 번호 같은 특별한 케이스에 주의해야 한다. 주민 등록 번호. 한국주민 등록 번호: _ _ _ _ _ _- _ _ _ _ _ _ _ 시간. _ _ : _ _ _ _ (09:45 AM or PM) 날짜. Date: _ _ / _ _ / _ _ _ _ (04/22/2005  April 22, 2005)

37 7.7.3 Dialog boxes 대화 상자는 사용자에게 정보를 보여 주거나
응답을 받는 사용자 인터페이스에서 사용되는 특별한 창이다. 대화 상자라고 부르는 이유 컴퓨터와 사용자 사이에 대화할 수 있는 기능을 제공하기 때문 -사용자에게 무언가를 알려 주거나,사용자로부터의 입력을 요청하는 등의 기능을 수행함.

38 7.7.3 Dialog boxes 가장 단순한 대화 상자는 경고대화 상자다. 이 상자는 메시지를 보여 주고 메시지를 읽고 나서 수동으로 '확인'을 누르도록 만든다. 경고는 단순한 확인 절차를 제공하거나 충돌, 사용자의 창 닫기 등의 까닭으로 프로그램이 종료됨을 알린다.

39 7.7.3 Dialog boxes dialog box 주의점 dialog box 는 주로 화면의 윗부분에 나타난다.
하지만 이러한 방식은 정보를 가리게 되므로 위험하다. ☞1) 대화상자 크기는 겹치거나 시각적 방해가 되지 않도록 작아야 한다. 2) 대화상자는 가까운 곳 에 나타나야 하지만, 위쪽 혹은 화면상의 관련 아이템에 위에 나타나지 말아야 한다. 3) 대화상자는 사용자들이 봤을 때 배경과 대화상자가 분리가 되도록 구분이 되어야 하지만 시각적으로 방해를 해서는 안 된다.

40 7.7.4 Novel design combining menus and direct manipulation
원형메뉴 : 메뉴의 세분화된 부분들은 메뉴선택과 직접조작 데이터 기입을 함께 겸비하고 있음 예전 pie menu : 사용자에게 메뉴선택과 데이터 기입을 따로 하게 하였음 ex) 인쇄글자 모양, 글자 크기 제어메뉴 : 포인터 장치가 구체적인 시작부분에 도달 했을 때 지시가 나오고, 그 즉시 직접조작 가능 marking메뉴 : 직접조작이 가능하고 포인팅장치의 방출이 명령선택 매카니즘으로 사용될 수 있다는 것을 보여줌

41 7.7.4 Novel design combining menus and direct manipulation
<flow menu> - 매개변수를 구체화 하는데 필요한 메뉴선택 이후 남은 중심지역으로 반환하는 것을 사용 - 다중선택과 직접조작은 포인팅장치를 들어올릴 필요 없이 복잡한 메뉴 선택과 데이터 기입을 허용하며, 서로 연쇄하는 것 이 가능 - 이 기술은 사용자들이 상호작용을 시작하기 위해서 menubar를 멀리서 다시 반환 하는 것을 요구하지 않을 때, 특별히 안쪽부분에 디스플레이 하는 것을 적용

42 7.7.4 Novel design combining menus and direct manipulation
<toolglass> -메뉴선택과 데이터기입을 함께 할 수 있는 두손으로 다 루는 작업을 사용 -사용자들은 그들의 한쪽손이 명령을 고르고 조작업무를 하고 있는 동안, 움직이지 않고 있는 다른 손이 쉽게 이 해할 수 있는 그림도구로 이동 -모든 메뉴가 사용자에게 가까이 있고 사용자가 출력된 화면 안에서 어디에 위치하고 있는지 쉽게 찾을 수 있도 록 중간크기의 데이터를 표시하는 것 이 유용함

43 7.8 Audio menus and menus for small displays
-시각적 메뉴 : 1) 지속성이 있다. 2) 사용자의 선택을 확신시켜준다. -음성 메뉴 : 1) 듣고 기억해야 한다. 2) 확실한 대답을 제공해야 한다.

44 7.8 Audio menus and menus for small displays
1)선택의 목록들은 사용자들에게 방송될 때,사용자들은 각각의 제안된 옵션들이 그들의 목표와 맞게 구성 되어 있는지를 확인해야 함 2) 사용자들에게 전체적인 옵션목록이 읽혀지고 있을 때 언제든지 옵션을 선택 할 수 있도록 해 준다. ( barge-in기법) 3) 복잡한 메뉴구조는 피하는 것이 좋다.

45 7.8 Audio menus and menus for small displays
-두개로 구분 되어있는 응용프로그램 영역 닌텐도 게임보이즈와 같은 오락을 위한 영역 달력, 주소록 과 같은 정보통신서비스를 위한 영역 -오락응용프로그램 은 비공식의 긴 Session 을 포함하며 강한 상호작용의 내용 포함 -정보와 커뮤니케이션의 응용프로그램은 시간과 주위환 경에 따라, 반복, 간결함, 상당히 구조화된session으로 구성 (세션(Session)의 의미 : 어떤 유저가 어떤 특정 사이트를 접속하여 머물 러 있는 시간.)

46 7.8 Audio menus and menus for small displays
작은 장치들은 한번에 정보의 부분만 제시할 수 있음 ☞사용자들이 결과와 계급의 레벨, 긴 형태의 부분 안에서 어떻게 메뉴아이템들 사이에서 탐색하는지에 대한 특별한 주의가 있어야 함. ◎많은 장치들은 결과와 선택버튼을 통해서 탐색하는데 필요한 두 개의 key를 제공하면서 전용 탐색키를 갖고 있음 몇몇의 작은 장치들은 스크린 및 혹은 옆에 위치한 softkey를 사용함 ☞softkey 는 디자이너들에게 모든 단계 마다 가장 논리적인 명령에 접근할 수 있도록 제공 ◎탐색키는 또한 큰 화면 상 에서의 탐색 형태를 스크롤 바를 통해서 간략화한다.

47 7.8 Audio menus and menus for small displays
모바일 장치는 사용자들에게 그들의 환경 안에서의 혼란과 방해를 다루도록 요구하고 있다. 자동저장기능을 제공하는 것은 결과물을 지정하고 인터페이스를 간략화한다. 간략한 쓰기와 주의 깊은 주제, 라벨 그리고 지시의 편집들은 인터페이스를 사용하는데 편하고 간단하게 해줌. 모든 단어들은 작은 화면에 의존하며, 그렇기 때문에 불필요한 문자와 공간은 제거 되어야 한다.

48 Nokia phones 한가지의 아이템을 제시 이것은 오직 하나의 강조를 통해 ▶아이콘 없이 아이템의 목록을
▶아이콘과 라벨을 사용하여 한가지의 아이템을 제시 ▶선택스크린 이것은 오직 하나의 강조를 통해 여러 개의 아이템을 보여주기 때문에 구별되는 방식 ▶아이콘 없이 아이템의 목록을 통해서 스크롤바를 사용하여 제시