User Interface는 서비스와 사용자 간의 접점이다. 설계하고자 하는 UX에 대한 명확함 위에 조직성, 경제성, 의사소통성 3가지 원칙을 잘 준수하면 좋은 User Interface를 설계할 수 있다. (물론 가장 중요한 것은 해당 UI를 통해서 어떤 UX를 전달할 것이냐는 의도이다)

_______
1. 조직성

조직성은 사용자가 서비스 이용 시 일관된 경험을 이어갈 수 있도록 친숙하고 일관된 형태의 UI를 제공해야 한다는 개념이다. 개별 UI 요소뿐만 아니라, 그것이 집합된 Complex 요소나 화면에서도 일관된 조직성이 뒷받침되어야 한다.

UI 조직성을 위해서는 일관된 UI Design system이 필요하다

조직성은 익숙한 개념적 구조를 적용하여 직관적으로 UI를 해석하도록 하는 것과도 관련 있다. 조직성을 잘 활용하면 UI를 통해서 우리 의도대로 사용자가 정보를 구분하고 순서화해서 보도록 만들 수 있다.
구분선은 정보를 ‘구분’시킨다. 여백도 그런 역할을 하지만 여백과 구분선이 같이 쓰이면 ‘1, 2차 구분’의 관계가 형성된다.

_______
2. 경제성

UI 설계 시 불필요한 요소들을 최대한 배제하고, 반드시 필요한 요소들만 사용하여 시각적인 잡음(noise)을 없애고 간결하고 명료하게 의미를 전달해야 한다. 경제적인 UI 설계를 위해서는 최소한의 실마리로 효율을 높여야 하고, 해석에 어려움을 주는 애매한 부분을 없애야 한다.

* Source : Diana Malewicz

간혹 사용자에게 친숙한 메타포나 색상을 적용하지 않아서 불필요한 잡음을 일으키는 사례도 있다. 다양한 케이스에서 어떤 게 잡음이고, 어떤 게 창의냐는 문제를 풀기 위해서는 기준값을 아는 것이 중요하다. 아래 토글버튼에서는 기준값이 ‘회색=disable’이다.

* Source : UX Movement

시각적 잡음이 큰 UI는 정보전달력이 떨어지는 것은 물론, 오해와 혼동을 초래하기도 한다. 눈에 띄어야 할 것들이 제대로 보이는 대신에 산만한 분위기가 주의력을 빼앗는다.

* source : Taras Bakusevych

_______
3. 의사소통성

좋은 UI를 설계하기 위해서는 보여주고자 하는 정보를 가장 알맞은 시각적 형태로 표현하고, 사용자가 UI를 통해 쉽게 의미를 이해하고 조작할 수 있어야 한다.
경제성과 의사소통성은 간혹 상호충돌하기도 하나, 항상 UX를 첫 번째로 고려하면 생각보다 쉽게 풀 수 있다.

* Source : Marc Andrew

색상은 조직성과도 관련 있지만(동일 색상에 같은 의미를 부여하게 된다는 유사성의 원리), 의사소통성 면에서도 큰 효과를 발휘한다 색상을 사용하면 불필요한 군더더기 없이 명확하게 UI 구조를 전달할 수 있다. 색상의 유사성 원리를 이용하면 UI 구조를 명확하게 전달하고 시선 흐름(시각적 계층구조)을 자유롭게 유도할 수 있다.

‘모든 디자인에는 줄일 수 없는 복잡성이 있다(Larry Tesler)’. 어떤 화면에는 들어가야 할 콘텐츠가 너무 많아서 줄이고 싶어도 줄일 수 없다. 이 복잡성을 어떻게 통제할 것인지 또한 UI 설계의 관건이다.
동일 화면(PLP)을 비교했을 때, 월마트가 아마존에 비해 복잡성을 훨씬 잘 통제했고 이는 경제성, 의사소통성으로 이어진다.

_______
맺음말

간단한 아티클에다가 너무 많은 지식을 담을 수는 없으나, UI 설계 시 자신의 감과 경험에만 의존하는 분들이 많아 보여서 기본적인 원칙을 꼭 지키시라는 의미에서 글을 올린다. UI는 정보를 전달하는 일선 창구이다. 서비스가 일관된 경험을 제공하기 위해서는 자신만의 체계가 정립될 필요가 있다.

예를 들어 라이트브레인 CX컨설팅그룹의 Design System은 117가지 UI요소들에 대해서 반드시 지켜야 할 원칙들을 체계화했다.

– CX컨설팅그룹 조성봉

*이 글은 조성봉 UXer 브런치 에 게재된 글입니다.