사용성과 관련된 UI 디자인 원칙 구현을 위한 그래픽 디자인 방법 연구
단순성 명확성 일관성을 중심으로
- , , -
A Study on Graphic Design Techniques for UI Design Principles related to Usability
- Focusing on ‘Simplicity’, ‘Clarity’, ‘Consistency’
주저자 정승은: (Chung, Seung Eun)
숭의여자대학교 시각디자인전공 교수
교신저자 석중휘: (Souk, Jung Hwi)
숭의여자대학교 시각디자인전공 교수 [email protected]
목차 서론 1.
연구의 배경 1.1.
연구 범위 및 방법 1.2.
2. 사용성을 위한 사용자 인터페이스 디자인 원칙 2.1. HCI연구에서의 사용성 요인
사용자 인터페이스 가이드라인에 나타난 디 2.2.
자인 원칙
그래픽 사용자 인터페이스 디자인을 위한 주요 3.
원칙과 디자인 기술 단순성
2.1. : 디자인에 부여된 문제의 경제적인 해결을 위한 원칙
명확성 요소들 간의 의미 있는 구별을 위 2.2. :
한 원칙
일관성 통합된 시스템 경험을 위한 원칙 2.3. :
결론 4.
참고문헌
(요약)
본 논문은 사용자 인터페이스에서 중요시되는 사용 성 원칙들을 그래픽으로 구현하기 위해 구체적인 그, 래픽 디자인 방법들에 대해 논의하고 있다.
먼저 HCI의 연구들에서 사용성의 요인을 살펴보고, 모바일 컴퓨터 등 디지털미디어 인터페이스를 IPTV, ,
위한 가이드라인들을 살펴봄으로써 실무현장에서 중, 요하게 제시하고 있는 원칙들을 살펴보았다 문헌 연. 구와 가이드라인조사에서 드러난 사용성 원칙들과 시 각적 원칙들에 중복되어 나타나고 있는 단순성‘ ’,
일관성 명확성의 원칙에 대해
‘ ’, ‘ , 관련된 문헌연
구를 바탕으로 이들의 개념을 정의하고 그래픽 디자 인 구현과 관련된 구체적인 활용방안을 제안하였다.
단순성 이란 디자인에 부여된 문제의 경제적인
‘ ‘
해결을 위한 원칙으로써, 1)중요하지 않은 요소의 제 거, 2)디자인 요소들의 규칙화, 3)전체 조직의 그룹 화를 제시하였다 명확성이란 요소들 간의 의미 . ’ ‘ 있는 구별을 위한 원칙으로써, 1) 정보 그룹들 간의 우선순위 결정 2) 구성요소간의 대비 등을 제시하였 다. ’일관성이란 통합된 시스템 경험을 위한 원‘ 칙으로써, 1) 디자인 요소들의 반복 2) 그리드의 사
용 등을 제시하였다.
주제어 사용성 : , UI디자인 원칙, GUI디자인 방법.
(Abstract)
The purpose of this article is to suggest some specific ideas regarding methods of graphic design when users embody some importantly considered principles of usability in the form of graphics.
Through investigation for elements of usability at research of HCI and some guideline for digital media interfaces such as IPTV, mobile devices, and computers, some important principles on design works was drawn as
“Simplicity”, “Clarity”, and “Consistency”, which was repeatedly shown in investigation of guideline and related articles as principle of usability and visibility. Based on the research, the author had defined their concept and suggests concrete application plan for realization of graphic design.
As a principle to solve the problem of economic issue, Simplicity is suggested as; 1) elimination of unimportant elements, 2) ordering design elements, 3) grouping and integrating all organization. As a principle of categorization of each element with its meaning,
“Clarity” is suggested as; 1) prioritization among information group, 2) comparison between design components. And the last, as a principle for experience of integrated system,
“Consistency” is suggested as; 1) repeat of design elements, 2) use of grid.
Keyword : Usability, UI design principle, Graphic design technique
Keyword : Usability, UI design principle, GUI design technique
서론 1.
연구의 배경 1.1.
사용자 인터페이스(User Interface, UI)란 사람과 사물 사이에서 의사소통을 할 수 있도록 만들어진 물 리적 가상적 매개체를 뜻한다 사용자 인터페이스는 , . 컴퓨터가 등장하고 사용방법이 복잡해짐에 따라 사용 자가 컴퓨터 시스템을 어떻게 사용하고 제어할 것인 지가 문제가 되면서 더욱 중요해진 개념이다.
사용자 인터페이스의 역할은 먼저 사용자가 시스템 이 제공하는 정보를 통해 사용방법을 이해하도록 하 는 것이며 편리한 사용과정을 통해 효과적인 커뮤니, 케이션을 이끌고 이로써 사용자에게 만족감을 가지, 도록 해야 하는 것이다.
초기 컴퓨터시스템의 인터페이스는 문자언어로 대 화하는 방식이었으나 곧 이를 대신하여 시각언어를 , 사용하여 컴퓨터와 커뮤니케이션하는 방식이 등장하 는데 이를 그래픽 사용자 인터페이스, GUI(Graphic
라고 한다 등
User Interface) (Packer , 2002). 이러 한 그래픽 사용자 인터페이스에서 그래픽 디자인이란 문자 대신 예쁜 그래픽만을 사용하는 문제가 아니라, 사용자 인지와 심성모형에 대응하여 정보와 커뮤니케 이션 과정을 가시적으로 만들어 이해와 사용을 용이 하게 하는 문제 해결 과정이라고 할 수 있다.
디지털 정보 시스템을 위한 그래픽 사용자 인터페 이스가 확대됨에 따라 시각디자인 영역에서 커뮤니케 이션의 효율성 문제가 새롭게 강조되고 있는 것처럼 보이지만 전통적으로도 그래픽 디자인이 단순한 미, 적 문제만을 이야기 한 것은 아니었다 인쇄와 같은 . 전통적인 매체의 시각디자인에서도 정보의 전달이- 라 측면에서 볼 때 효율적인 커뮤니케이션은 디자- 인의 중요한 목표였다 예술이 그 독창성과 표현력에 . 가치를 두고 있다면 디자인은 특정한 사용자와 작업, 에 적합할 때 그 가치를 인정받아왔다 즉 시각 디자. , 인 분야는 형태의 기능성이나 심미성을 따로 떼어 생 각하는 것이 아니라 어떤 임무나 문제의 해결과 관련 하여 가장 직접적으로 연관된 분야였다.
다시 말하면 그래픽 인터페이스가 가져다 줄 수 있 는 효과는 감성적 효과뿐만 아니라 인지적 효과를 포 함하고 있는 것이며 인지적 효과는 주로 사용성과 , 관련된 것으로 사용자 인터페이스의 그래픽 디자인 문제의 목표 역시 사용성과 밀접한 관계가 있는 것이 다 (Mullet , 1994; 등 김진우 등, 2005).
그러나 사용자 인터페이스에서 중요시되는 사용성
원칙들은 그래픽으로 구현되기 위하여 구체적으로 어 떤 디자인 방법들이 필요한지에 대한 연구는 찾기 어 렵다 실무 사례에서도 많은 사용자 인터페이스 가이. 드라인들을 살펴보면 준수해야할 인터페이스 원칙을 , 제시하되 이의 시각적 구현을 위한 디자인 방법은 언 급되지 않고 사례별 스타일가이드라인만 제시되고 있 어 제시된 사례에서 벗어나는 경우에는 디자이너 개, 개인의 암묵적 지식에 의존할 수 밖에 없는 상황이다.
따라서 인터페이스 원칙에 대하여 실제적인 디자인 관점에서 이론들을 살펴보고 이와 관련된 디자인 방 법(Technique)을 논의하는 연구가 필요하다고 보았 다.
연구의 범위 및 방법 1.2.
본 연구에서는 차로 사용성과 관련된 문헌과 사용1 자인터페이스가이드라인 연구를 중심으로 UI디자인 원칙들을 고찰하고 차로 이들 중 단순성 명확성, 2 , , 일관성의 원칙을 중심으로 이와 관련된 문헌연구를 통해 GUI에서의 그 각각의 개념을 정의하며 그래픽 디자인 구현과 관련된 방법을 논의하여 구체적인 활 용방안을 제안하였다.
사용성을 위한 사용자 인터페이스 디자인 원칙 2.
사용자 인터페이스를 통해 사람과 컴퓨터시스템 사 이에 커뮤니케이션이 발생하게 되는데 인터페이스에, 서의 커뮤니케이션은 컴퓨터시스템의 효율적 사용을 목표로 한다 즉 사용성은 인터페이스 디자인을 평가. , 하는 핵심 속성으로 자리 잡았으며 좋은 사용자 인, 터페이스는 뛰어난 사용성을 통해 인터페이스의 커뮤 니케이션 효과를 의미 있게 향상시켜주어야 한다.
2.1. HCI연구에서의 사용성 요인
사용성(Usability)은 어떤 도구나 인간이 만든 물 건 서비스를 어떤 특정 목적을 달성하기 위해 사용, 할 때에 얼마나 사용하기 쉬운가를 말하는 용어이다.
즉 사용자 인터페이스를 통하여 과업을 수행하면서 , 사용자가 느끼는 총체적인 사용품질을 의미한다.
사용성에 대한 정의를 체계적으로 시도한 로부터 많은 연구자들이 사용성 Shackel(1986) HCI
요인을 연구해 왔는데 학습의 용이성 사용의 효율, , 성 기억의 용이성 사용자 에러의 최소화 주관적인 , , , 만족도 등의 질적 요인으로 이루어져 있다(Shackel,
외 외
1986; Nielsen, 1993; Preece , 1994; Brinck ,
사용성에 대한 국제표준인 에서는 사용성
2002). ISO
요인을 효율성(Efficiency), 효과성(Effectiveness), 만족성(Satisfaction)로 규정하고 있다 여기서 효율. 성은 사용자가 과업을 달성하기 위해 투입한 자원과 그 효과의 정도를 말하며 효과성은 사용자의 과업 , 수행의 정확성 및 수행완수 여부를 말한다 만족성은 . 사용자가 시스템을 사용할 때 느끼는 주관적 감정 효 과를 말한다.
[표 사용성 요인 1]
Shackel (1986)
Nielsen (1993)
Preece, Rogers
& Sharp (1994)
Brinck, Gergle, and Wood (2002)
ISO
Effective ness
Learnabil ity
Effective to use
Function ally correct
Efficien cy Learnabil
ity
Efficienc y of use
Efficient to use
Efficient to use
Effecti veness Flexibility Memora
bility
Safe to use
Easy to learn
Satisfa ction User
Attitude
Error recovery
Have good utility
Easy to rememb er Satisfact
ion
Easy to learn
Error tolerant Easy to
rememb er how to use
Subjectiv ely pleasing
사용자 인터페이스의 목표는 사용성의 향상이라고 할 수 있으며 사용성은 여러 가지 속성을 복합적으, 로 고려해서 설계해야 한다 오랜 기간 동안 . HCI분야 의 연구자들은 사용자 인터페이스를 위한 설계원칙인 휴리스틱Heuristic 휴리스틱Heuristic은 정확한 이론 적인 배경이나 실정적인 근거가 있어서 항상 옳다고 할 수 있는 것은 아니지만 오래 전부터 사용되어 이, 미 널리 알려진 일반적인 설계법칙들을 의미한다 김( 진우, 2005).
을 제시해 왔으며 이러한 휴리스틱에서 사용성의 , 속성(Attribute)들을 추출할 수 있다 여기서 나타난 . 사용성의 속성들은 현대의 사용자 인터페이스 디자인 을 위한 원칙(Principle)의 기초가 되었다.
일반적으로 널리 알려진 휴리스틱으로는
의 가지 휴리스틱이 있으며
Nielsen(1994) 10 ,
과 Norman(1988), Sheiderman & Plaisant(2005) 함께 살펴보았다 휴리스틱은 보통 서술적인 문장으. 로 되어 있으나 중복된 개념을 담고 있는 휴리스틱, 들을 통합하여 보편적인 기준을 정립하기 위해서는 문장이 담고 있는 내용적 속성을 하나의 단어로 표현 하는 것이 필요하다.
[표2] HCI 연구자들의 인터페이스 휴리스틱 의 가지
Norman 7 휴리스틱 (1988)
Nielsen의 가지 휴리스틱 10
(1994)
Shneiderman &
의 가지 Plaisant 8 휴리스틱 (2005) Use both
knowledge in the world and knowledge in the head
Visibility of system status
Strive for Consistency
Simplify the structure of tasks
Match between system and the real world
Cater to Universal Usability Make things
visible
User control and freedom
Offer Informative Feedback Get the
mappings right
Consistency and standards
Design Dialogs to Yield Closure Exploit the
power of constrains, both natural and artificial
Error
prevention Prevent Errors
Design for error
Recognition rather than recall
Permit Easy Reversal of Actions When all else
fails, standardize
Flexibility Support Internal Locus of Control Aesthetic and
minimalist design
Reduce Short-term Memory Load Help User
recognize, diagnose, and recover from errors Help and documentation
사용자 인터페이스 가이드라인에 나타난 디 2.2.
자인 원칙
다음으로, IPTV, 모바일 컴퓨터 등 디지털미디어 , 인터페이스를 위한 가이드라인들을 살펴봄으로써 실, 무현장에서 중요하게 제시하고 있는 원칙(Principle) 들을 살펴보았다 사용자 인터페이스 디자인 원칙이. 란 전체 구축과정에 있어 디자인의 결정을 가이드 하 는 일반적인 목표이다 현장에서 사용하고 있는 가이. 드라인들은 구체적인 디자인규칙과 관련된 실행가이 드라인이 대부분으로 원칙을 직접적으로 제시하고 , 있는 사례는 많지 않았다 다음은 원칙을 포함하고 . 있는 가이드라인들의 사례이다.
표 사용자 인터페이스 가이드라인에 나타난 디자인
[ 3]
원칙들
IPTV UI Mobile UI Computer UI KT
St andaUI Manualds
SK StandaUI Manualds
SKT RequireUI
ments
Nokia, UI Style Guide
Apple Human Interface Guidelines
일관성 명확성 Visibility Simplicit
y Metaphor
단순성 간결성 Simplicity Friendli
ness Mental Model
친숙성 편의성 Consisten
cy Power
- UI Familiarity 직관성 Familiarity Simplicity 통일성 Efficiency Availability 유도성 Prioritizat
ion Discoverabi
lity.
접근성 User in Control
Explicit &
Implied actions
Feedback Direct
Manipulatio n
Error User
Control Affordan
ces
Feedback&
Communic ation Personali
zation Consisten
cy
Fun WYSIWYG
Forgivene ss Stability VModeles
sness
연구자들의 휴리스틱과 디지털미디어 인터페 HCI
이스 가이드라인들에서 반복적으로 나타나고 있는 사 용성 속성들을 요약하면 일관성, (Consistency), 단순
성(Simplicity), 친숙성(Familiarity), 명확성
가항성 통제성
(Clarity), (Navigability), 등의 원칙으로 도출할 수 있다 (Controllability) .
그러나 이러한 사용성 속성들은 인터페이스 설계영 역 설계과 그래픽 인터페이스 디자인 영역(UI ) (GUI디 자인을 포괄적으로 포함하고 있기 때문에 중요한 ) , 원칙들의 해석과 적용이 모호해 질 수 있다 무엇보. 다 그래픽 인터페이스 디자인 영역에서는 여러 가지 개별적인 그래픽 요소의 시각적 구성방법을 가이드 해 줄 수 있는 기준이 필요하다 인터페이스에서의 . 그래픽 디자인은 단순한 심미적 문제 뿐만 아니라 사 용성과 관련된 기능적 문제도 포함해야 하므로 그래, 픽 사용자 인터페이스 디자인 과정을 위해서는 디자 인 법칙들과 사용성 원칙들을 함께 고려해야 한다.
최근에 Ngo와 Byrne(2001)은 미학에서 이야기 되어 왔던 디자인 법칙들을 그래픽 인터페이스에 맞 추어서 정리하였는데 단순성, (Simplicity), 대비성
균형성 연속성
(Contrast), (Balance), (Sequence), 리듬성(Rhythm), 비례성(Proportion), 통일성
조밀성 규칙성 안
(Unity), (Density), (Regularity), 정성(Equilibrium)의 10가지 시각적 원칙을 제시하 였다. Lynch와 Horton(1999)은 여러 페이지간의 시 각적 원칙의 중요성을 언급하면서 일관성
다양성 을 제시하였다
(Consistency), (Diversity) . 본 연구에서는 HCI문헌 연구와 가이드라인조사에 서 드러난 사용성 원칙들과 시각적 원칙들에 중복되 어 나타나고 있는 단순성(Simplicity), 일관성 명확성 의 원칙에 대해 관 (Consistency), (Clarity) , 련된 지각 및 시지각 이론과 함께 그래픽 사용자 인 터페이스 디자인 방법들을 제시하고자한다.
그래픽 사용자 인터페이스 디자인을 위한 주요 3.
원칙과 디자인 기술 단순성
3.1. (Simplicity) : 디자인에 부여된 문제의 경제적인 해결을 위한 원칙
단순성과 관련된 대표적인 이론은 게슈탈트학파1) 의 프라그난쯔의 법칙(Law of Pragnanz)이다 프라. 그난쯔(Pragnanz)는 ‘좋은 형태’, ‘간결한 것’ 이라는 뜻으로 이 법칙은 모든 자극 패턴을 가능한 , 한 가장 간단한 구조로 보려고 하는 것이다 게슈탈.
1) 게슈탈트의 시지각 원리는 인간의 시각정보처리 과정에 근 거하여 연구되고 실험을 통해 검증된 이론으로 시지각 특성과 원리를 연구하는 형태심리학 분야에서 제기되었다
트 학자 중 Khler(1947)은 이 현상에 대하여 신경생 리학적 접근을 통하여 설명하였는데 두뇌는 역동적, 인 물리시스템이며 이것은 안정적이고 최소로 일하는 경향 최소 원칙 ( Minimum Principle)이 있다고 하였 다 이것은 시각피질에서의 프라그난쯔. (Pragnanz)에 대한 인식의 경향을 설명한다(Gordon, 2004).
단순성과 관련된 또 다른 배경은 정보처리 이론의 단기기억 사용제한 (Information processing)
법칙이다. Miller(1956)는 인간의 정보처리과정과 관 련하여 개의 이론적 개념을 제시했는데 덩어리2 ,
와 단기기억
(Chunk) (Short-term memory)2) 이다. 는 단기기억의 용량에는 한계가 있으며
Miller 7+/-2
의 정보 덩어리(Chunk)만을 담을 수 있다고 하였다. 효과적인 사용자 인터페이스 디자인을 위한 첫 걸음 은 인간의 인지 특성을 고려하여 인터페이스를 디자 인하는 것이며 따라서 인터페이스 디자인은 사용자, 의 인지적 부담을 줄여주는 방향으로 제시되어야 한 다.
기능적 측면에서 단순성이란 디자인에 부여된 문제 를 가장 경제적인 방법으로 해결할 수 있는 접근방법 을 통해 사용자가 보는 즉시 느낄 수 있도록 하는 것 을 말한다 단순화는 의미의 간결화를 구하는 것으로. 써 요소의 양과 질에서 간결화 되도록 한다 즉 단, . , 순한 디자인은 표현에 있어 깊은 이해가 드러나 있는 것이며 사용자가 문제의 핵심을 잘 이해할 수 있게 , 하는 것이다.
사용자 인테페이스 디자인에서의 단순성은 다음과 같이 정의할 수 있다 단순성. ‘ (Simplicity)’은 가능 한 한 불필요한 요소를 제거하고 간결하게 표현하는 것으로 커뮤니케이션에 필요한 요소만 최적화하는 , 것을 말한다 단순한 디자인을 구축하는 구체적인 디. 자인 방법으로는 1) 중요하지 않은 요소의 제거, 2) 요소들의 규칙화, 3) 전체 조직의 그룹화 등이 있다.
중요하지 않은 요소의 제거
!
전달하고자 하는 메시지들은 중요하지 않은 요소를 제거함으로써 오히려 강화된다 정보의 전달에 있어. 서 화면에 가능한 불필요한 요소를 배제하면 전달 효 과를 극대화 시킬 수 있다.
디자인 요소들의 규칙화 산만한 불규칙의 제거( )
!
단순화는 질서의 법칙이라고도 하며 요소를 규칙,
2) 작업기억(Working memory)이라고도 한다.
화함으로써 디자인을 더욱 단순화시킨다 규칙성은 . 눈에 보이는 법칙이나 원리 또는 리듬에 따라 요소, 를 반복함에 따라 정보를 축약시킨다.
세부적인 디자인 테크닉으로 첫째 정렬이 있다 일, . 정한 축을 따라 요소들을 정렬하게 되면 전체적인 내 용의 복잡함이 줄어들고 전체적인 형태 또한 깔끔하 고 이해하기 쉬워진다 디자인 요소들의 위치를 규칙. 에 따르게 하고 그 규칙에 대한 예외를 최소화시키면 전체적인 형태 굴곡이 단순하게 정리된다 둘째 요소. , 들의 크기나 공간을 규격화하거나 반복하는 것도 하 나의 방법이며 셋째 요소들의 형태를 기본적인 기하, , 학적 모양으로 간략화하기 등이 있다.
우연히 생겨난 추가적인 정보나 요소들의 적절치 못한 크기와 위치변화는 단지 커뮤니케이션을 방해하 는 시각적 노이즈 밖에 되지 않는다 산만한 불규칙. 을 제거하는 것은 의미 있는 관계를 강화하는 효과를 나타낸다.
전체 조직의 그룹화
!
그룹화란 비슷한 요소들을 함께 묶음으로써 복
잡한 정보를 사용자가 다루기에 적당한 단위로 나누 어 줄임으로써 전체 조직을 단순하게 만드는 것을 말 한다 인터페이스에서 그룹화는 단순히 몇 개의 덩어. 리로 나누는 것이 아니라 중요한 내용을 주변적인 , 항목에서 분리시키면서 또 기능적인 단위로 단단히 , 묶는 것이다.
시각디자인에서 시각적 그룹화와 관련된 디자인 법 칙들은 대부분 게슈탈트 원리를 기초로 한다 가까이. 에 있는 요소들끼리 묶여 보이는 근접성의 원리‘ ’ , 시각변수형태 크기 컬러 질감 명암( , , , , 3) ) 등 들의 특 질이 비슷한 것끼리 묶여 보이는 유사성 의 원리 ‘ ’ 등을 활용하여 효과적인 그룹화를 할 수 있다 이러. 한 게슈탈트 원리를 적용하면 무거운 경계선이나 상 자 없이도 효과적인 그룹화를 할 수 있다 경계선을 . 자꾸 그려서 사용자의 시각을 혼란스럽게 하는 것보 다는 공간이나 디자인 요소의 속성을 이용한 요소들 , 자체의 그룹화로 단순한 시각적 조직을 제시하는 것 이 훨씬 효과적인 방법이다.
3) Bertin(1969)이 인간이 망막에서 구별할 수 있는 요소를 제시한 것으로 명도 색상 질감 형태 위치 방향 크기의 일, , , , , , , 곱가지 그래픽 요소가 있다.
명확성 요소들 간의 의미 있는 구별 2.2. (Clarity):
을 위한 원칙
명확성과 관련된 이론은 선택적 주의(Selective 이론이다
Attention) .
나 의 연구와 같은
Broadbent(1958) Cherry(1953)
선택적 주의 이론의 배경에는 인간은 보통 한꺼번에 한 개의 정보만 취급할 수 있다는 생각이 기본이다.
즉 인간이라는 정보처리 시스템의 어딘가에 단일회, 로의 정보처리과정이 있으며 그러기 위해서는 여러 , 정보로부터 한 종류의 정보만 선택되어야 한다는 것 이다 만약 처리해야 할 여러 가지 정보들이 한꺼번. 에 제시된다면 정보를 놓치거나 혼란상태가 되거나, , , 순차적으로 처리하려고 할 것이다 따라서 처리해야 . 할 복수의 정보들은 동시에 제시되지 않아야 하며, 중요한 정보와 덜 중요한 정보들이 가려져 순차적으 로 제시되어야 한다(Cherry, 1953; Broadbent, 1958;
외 일본인간공학회 스크린 디자인 연 Conway , 2001;
구회, 2002). 따라서 인터페이스에 표현되는 정보들 은 우선순위에 따라 사용자에게 계층적으로 보여 져 야 한다 먼저 나타나야 할 중요한 정보는 디자인에. 서 가장 돋보이고 별다른 노력 없이도 저절로 사용, 자의 관심을 모을 수 있어야 한다 그리고 덜 중요한 . 정보들은 의도적으로 노력을 해야만 보일 수 있도록 디자인해야 한다 시각적 계층화는 이렇듯 차등적으. 로 구현된 구성요소에 의해 사용자의 시선을 유도하 여 사용자가 정보의 중요성에 따라 쉽게 시선을 움, 직이도록 해주는 것이다.
와 은 시각적 계층화가 일종 Lynch Horton(1999)
의 화면 구성법칙이며 한 페이지 안의 구성요소간의 , 관계 를 설정함에 있어서 사용자가 구성요소를 단
‘ ’
계적으로 인지하도록 설계하는 것이라고 하였다 그. 런데 이러한 관계가 모호할 때 시각적 모호성은 언, 어적 모호성처럼 구성상의 의도뿐만 아니라 의미까지 도 모호하게 된다.
따라서 바로 여기서 명확성 의 개념이 강조되는 것‘ ’ 이다 명확화는 구성요소들 사이의 차이를 크게 부각. 시켜 보다 쉽게 느낄 수 있도록 하는 것으로 좋은 , 디자인이란 조화로움 속에서 각 요소의 역할을 명확 하게 하는 것이다 명확성은 커뮤니케이션에 올바른 . 초점을 맞출 때 드러나며 인터페이스가 전달하는 정, 보나 메시지가 무엇이던 간에 메시지의 본질이 디자 인의 실제적인 형태로 드러나도록 도와준다(Kevin
등 Mullet , 1994).
명확성과 관련된 디자인 법칙으로는 Ngo와
도 언급한 대비 가 있다
Byrne(2001) ‘ (Contrast)’ . 대비는 화면 구성요소 각각의 색 형태 크기 등의 차, , 이를 극대화하는 효과로써 모든 대비들은 의도적이, 고 특별한 의미전달을 위해서 사용되어야 한다.
사용자 인터페이스 디자인에서의 명확성은 다음과 같이 정의할 수 있다 명확성. ‘ (Clarity)’은 인터페이스 의 구성 요소들 간의 대비가 의미 있게 구별되어 인, 터페이스의 구조와 요소들의 역할이 명확하게 드러난 정도를 말한다 명확한 디자인을 구축하는 구체적인 . 디자인 방법으로는 1) 정보 그룹들 간의 우선순위 결 정 구성요소간의 대비 등이 있다2) .
정보 그룹들 간의 우선순위 결정 계층화( )
!
하나의 페이지 내에서 정보그룹들이 전체에서 드러 나는 순서를 결정하는 것이다 정보 그룹들 간의 우. 선순위를 결정하기 위해서는 커뮤니케이션 목적에 대 한 철저한 이해에서부터 출발해야 하며 항상 전달할 , 정보의 분석과 조직화 과정을 거치는 것이 필요하다.
구성요소간의 대비 시각적 구별( )
!
필요한 계층들을 먼저 결정되었으면 그것의 적합, 한 차별성과 적절한 우선순위를 나타내기 위해 계층 간의 대비를 명확히 한다 계층화 효과를 위해 적절. 한 시각변수의 대비를 이용해야 하는데 특히 크기와 , 명암은 계층구조를 명확하게 설정하게 해준다 이 때. , 같은 계층 그룹 내에서의 차이는 최소화하는 반면, 다른 계층 그룹과 그룹 사이의 인식적 차이는 최대화 하는 것이 좋다(Mullet , 1994).등
일관성 통합된 시스템 경험을
2.3. (Consistency):
위한 원칙
일관성과 관련된 이론은 스키마(Schema)이론이다. 은 스키마를 과거 경험의 적극적인 조 Bartlett(1932)
직화로 정의하고 이 조직화를 많은 구체적인 예를 표 상할 수 있는 일반적인 인지 구조를 구축하는 과정이 라고 보았으며, Thorndyke(1984)는 스키마란 지식 의 덩이로 일반적인 절차 대상 지각 결과 사건 일, , , , , 련의 사건 또는 사회적 상황을 표상하는 것이라고 , 하였다. Neisser(1976)에 의하면 스키마는 지각 사 이클 전체의 일부이며 그것은 지각자 개인의 내부과, 정이고 경험에 의해 수정된 것이라고 하였다.
이 스키마 이론을 받치고 있는 기본 전제는 모든 새로운 정보는 스키마에 표상된 옛 정보와 상호작용
한다는 것이다 즉 스키마는 예기적 스키마 탐색. , ‘ "
대상으로부터의 정보 추출 스키마의 수정 탐색’
" " "
과 같이 반복되는 지각 사이클(Perceptual cycle)을 형성한다고 볼 수 있다윤철호( , 1996).
이러한 관점에서 사용자 인터페이스에서의 일관성 , 강화는 학습과 사용에서의 경험적인 복잡도 를 줄‘ ’ 여 주며 인간의 지식구조인 스키마, (Schema)라는 개 념의 원형의 형성을 증진시키는 효과를 가져온다는 것을 이해할 수 있다.
사용자 인터페이스에서의 일관성은 하나의 페이지 내에서도 중요하지만 여러 페이지간의 일관성을 이, 야기할 때 그 중요성이 더욱 부각된다. Lynch와
은 여러 페이지간의 시각적 원칙의 중 Horton(1999)
요성을 언급하면서 일관성을 제시하였듯이 사용자 , 인터페이스들을 하나의 시스템으로 인식하고 이를 위 한 일관성을 주요한 원칙을 세우는 것은 매우 중요한 일이다.
일관성의 개념은 전통적인 시각디자인에서도 기본 적인 디자인 원칙으로 사용되어 왔다 여러 페이지로 . 이루어진 하나의 인쇄물 디자인이나, CI시스템 디자 인 사인시스템 디자인 등에서 공통의 디자인 언어를 , 공유하고 계획된 디자인을 해야 하는 것은 가장 기본 적인 개념이다 여러 페이지로 이루어진 웹사이트나 . 기타 디지털미디어의 사용자 인터페이스에서는 사용 성 문제와 직접적인 관련이 있으므로 더욱 중요하게 , 다루어져야 한다 사용자 인터페이스에서의 일관성은 . 요소의 크기와 위치 혹은 형태나 주제의 반복을 통해 시스템에서 의미 있는 구조패턴을 만들며 사용자
GUI ,
에게 주는 규칙적인 경험은 예측성의 효과를 주어 사 용성을 향상시킨다(Mullet , 1994). 등 사용자 인터페 이스 디자인에서의 일관성은 다음과 같이 정의할 수 있다. ‘일관성(Consistency)’은 커뮤니케이션을 향 상시키기 위해 정보를 규칙화하여 시스템 전체에 걸 쳐 동일하게 사용하는 것을 말한다 이 개념은 하나. 의 시스템 내에서 구성되는 인터페이스의 일관성뿐만 아니라 기존 시스템과의 일관성4)도 고려된다 일관성 . 있는 디자인을 구축하는 구체적인 디자인 방법으로는
4) 일관성에는 내부적 일관성 외부적 일관성 실세계와의 일, , 관성이 있다 내부적인 일관성은 하나의 멀티미디어 제품이나 . 웹사이트에서 지켜지는 통일된 약속 각종 요소들의 위치 크- , 기 조작법 용어 등 을 의미한다 외부적 일관성은 기존에 사, , - . 용하던 시스템 혹은 시스템이 사용되고 있는 플랫폼과의 일관, 성을 이야기 한다 이만재 외( , 2002). 실세계와의 일관성은 실 세계의 경험과 일관성 있는 사례를 만들어 내는 것으로 여기서 는 다루지 않는다.
디자인 요소들의 반복 그리드의 사용 등이 있
1) 2)
다.
디자인 요소들의 반복
!
디스플레이에서 규칙성을 찾으려는 강력한 인간의 특성 때문에 단지 몇 개의 요소를 일정하게 정해진 , 위치에 반복하는 것만으로도 약화되어 있는 일관성을 잡아줄 수 있다.
디스플레이 전반에 걸쳐 중요하게 부각되는 구조적 요소를 일관되게 배치함으로써 고정된 위치를 정하, 고 자연스럽게 반복되는 디자인 요소들을 시각적으, 로 강화하기 위하여 일관된 표현스타일 텍스트 이미, , 지들을 사용하는 것이 필요하다.
그리드의 사용
!
그리드는 각 화면을 비슷한 선을 따라 구조화함으 로써 사용자가 시스템 안에서 특정한 정보의 위치를 예측할 수 있게 한다 공통된 레이아웃 포맷의 칼럼. 위치나 간격을 결정하는데 도움을 준다.
전통적인 편집디자인에서부터 발전된 개념으로 사, 용자 인터페이스 디자인에서도 효과적으로 활용할 수 있다 잘 설계된 그리드 시스템은 통제된 다양성과 . 일관되게 표현된 심미성을 완벽하게 유지하면서 필요 에 따라 개선해나갈 수 있는 유연성을 표현할 수 있 다.
결론 4.
본 논문에서는 그래픽 사용자 인터페이스를 위한 주요한 원칙을 고찰하여 제시하고 이와 관련된 시지 각이론과 디자인 방법들을 제시하였다 디자인에서 . 강조해야 할 요소들을 조심스럽게 선택하고단순성( ), 강조하는 요소가 직관적으로 제시되도록 함명확성( ) 으로써 커뮤니케이션의 효율성을 향상시킬 수 있다.
또한 시스템 전체에서 동일하게 작용하는 규칙성 일, ( 관성을 만들고 지키는 것을 통해 시스템을 배우기 ) 쉽게 하고 기억하기 쉽게 할 수 있다.
본 논문에서는 사용성과 관련된 디자인 원칙 중UI 에서 단순성 명확성 일관성의 가지 원칙에 대해서, , 3 만 다뤘으나 이어지는 연구에서 다른 원칙들에 대해, 서도 연구가 진행하여 디자인 교육과 실무에서 활용 할 수 있는 토대를 만드는 것이 필요하다.
본 연구는 사용성 관점에서 정의되고 서술된 디UI 자인 원칙을 그래픽 디자인 관점에서 인간의 지각 및
시지각과 관련된 이론들을 토대로 디자인 요소를 다 루는 구체적인 방법을 다뤘다는데 의의가 있다 초보 . 디자이너 및 새로운 디지털 매체를 맞닥뜨리게 되는 디자이너들에게 실질적인 도움을 주는 배경이 되기 바라며 또한 기본에 충실함으로써 얻어 질 수 있는 , 효과가 어떤 것인지 이해하는데 도움이 되기를 기대 한다.
참고문헌
김상훈. (2011).
∙ 방통 융합시대의 방송광고산업 발전
방안
. KCA공동컨퍼런스
∙ 김진우 (2005). Human Computer Interaction 개론. 서울 안그라픽스: .
윤철호 (1996).
∙ 인간 컴퓨터 인터페이스 서울. :
대영사.
이만재 이상선 , (2002).
∙ 멀티미디어 교과서. 서울:
안그라픽스.
∙ 일본인간공학회 스크린 디자인연구회 이진호 이남식 . , 역 (2002). GUI 디자인가이드. 서울 안그라픽스: .
Apple Inc. (2008).
∙ Apple Human Interface
Guidelines.
Booth, P. (1989).
∙ An introduction to
human-computer in-teraction. London: Lawrence Erlbaum Associates.
Broadbent, D. E. (1958).
∙ Perception and
communication. New York: Pergamon.
Brinck, T., Gergle, D., & Wood, D. S. (2002).
∙
Designing Web sites that work: Usability for the Web. San Francisco: Morgan Kaufmann.
Cherry, E. C. (1953).
∙ Some experiments on the recognition of speech, with one and with two ears. Journal of the Acoustical Society of America, 25, 975-979.
Conway, R. A. A., Cowan, N., & Bunting, F. M.
∙
(2001). The cocktail party phenomenon revisited: The importance of working memory capacity, Psychonomic Bulletin & Review, 8 (2), 331-335.
Gordon, E. I. (2004),
∙ Theories of visual
perception. Psychology Press.
ISO. (2001).
∙ ISO 9126-1: 2001 Software engineering-Product quality, Part 1: Quality Model.
Lynch, P. J. & Horton, S. (1999).
∙ Web style
Guide. Yale university press.
Mullet, K. & Sano, D. (1994).
∙ Designing Visual
Interfaces. Communication Oriented Techniques.
Ngo, D. C. L. & Byrne, J. G. (2001). Application
∙
of an aesthetic evaluation model to data entry screens. Pergamon, 149~185
Nielsen, J. (1993).
∙ Usability Engineering.
Academic Press, San Diego, CA.
Nielsen, J. (1994).
∙ Heuristic evaluation. Usability Inspection Methods. Edited by Nielsen, J. and
Mack, R., NY: John Wiley and Sons. 25-62.
Nielson, J., & Molich, R. (1990).
∙ Heuristic
evaluation of user Interfaces. Proc. ACM CHI’90 Conf. (Seattle, WA, 1-5 Aprill), 249-256
Norman, D. A. (1988).
∙ The Psychology of
Everyday Things. basic books.
Packer, R. & Jordan, K. (2002).
∙ Multimedia,
W.W.North & Company.
Preece, J., Rogers, Y., & Sharp, H. (1994)
∙
Interaction Design: Beyond Human-Computer Interaction. John Wiley & Sons Inc.
Shackel, B. (1986).
∙ Ergonomics in design for
usability, people and computers: Designing for usability. Cambridge.
Shneiderman, B. (1982).
∙ The Future of
interactive systemsand the emergence of direct manipulation. Behavior and Information Technology, 1(3), 237-256.
Shneiderman, B. (1988).
∙ Designing the Interface:
Stategies for Effective Human-Computer Interaction. Addison Wesley Longman, Inc.
Shneiderman, B. & Plaisant, C. (2005).
∙ Designing
the User Interface: Strategies for Effective Human-Computer Interaction, Addison Wesley, Boston, MA.
Thorndyke, P. (1984).
∙ Applications of schema
theory in cognitive research. In Tutorials in Learning and Memory: Essays in Honor of Gordon Bower, edited by J. Anderson and S.
Kosslyn. San Francisco: W. H. Freeman.
167 192.–
Neisser, U. (1976).
∙ Cognition and reality:
Principles and implications of cognitive psychology. San Francisco: Freeman.
전자우편: [email protected] 원고접수일: 2013 10 29년 월 일 심사완료일: 2013 11 10년 월 일 게재결정일: 2013 12 10년 월 일 명의 익명 에 의한 심사
3 (匿名) .
