[ UI / Pictogram ] '픽토그램'을 왜 사용해야하는가? 글자가 있는데?!

최근 여행관련 홈페이지를 보다가 가독성이 안되는 사이트를 보고
이것보다 더 좋은 사이트가 있겠지? 라는 생각에 몇몇 사이트를 검색했다.

그중 눈에 띄는 부분은 왜 이 사이트가 의미 전달이 선명하고, 직관적인지?
라는 생각이 들었다. 그 차이는

 

 

픽토그램

 

 

 

여행을 떠나 보자

와이페이모어(왼), 스카이스케너(중앙), 에어아시아(오른)

 

'일정 선택' 영역만 볼까요?

대다수 일정 페이지는 '스카이스케너'와 같이 UI를 제작한다. 배경과 대비차가 좋아
인식하기도 좋다고 생각했다. 다만 각각의 항목이 뭘 나타내는지 읽기 위해선 눈에
힘을 줘야 한다. 각 항목별(<input />) 정보밀도(텍스트 개수)가 높다.

스카이스케너

---

 

에어아시아

반면, 에어아시아는 픽토그램을 활용해 정보 밀도(텍스트 개수)를 낮춤으로써, 가독성을 높였고,
각 항목별(<input />) '날짜 입력' 단어를 제외하고, 픽토그램과 날짜 입력 방식을 조합, 장소는
흔히 Location 이라는 픽토그램을 활용해 더 빠른 인식 속도를 높였다.

 

추가 : 배경 화면

와이페이모어

스케줄 측면만 본다면, 와이페이모어 나름 괜찮은 UI라고 생각한다. 다만 나는 배경이 너무 벅차다.

그럼에도 에어아시아가 데이터 정보를 출력한 순서가 더 합리적이라고 생각한다.
무엇보다 정보밀도를 적절히 선택하고 게슈탈트 이론의 근접성의 이론 등을 활용해
사용자가 인지적으로 공간을 나누는 것도 좋은 디자인이라고 생각하기 때문이다.

 

---

 

더불어, 우리가 추가적으로 고민해봐야할 부분은
맨 처음 페이지에 들어갔을 때 스케쥴 페이지 뿐만 아니라 전체 페이지에서 주는 분위기이다.

각자 느껴보길 바란다.

와이페이모어	스카이스케너	에어아시아
Apple

 

 

---

 

 

픽토그램은 무엇인가?

wiki

위키

그림문자(영어: pictogram, pictogramm, pictograph 픽토그램[*];
"그림"을 뜻하는 라틴어 pict(us) 와 "전달"을 의미하는 미국어 telegram)
또는 픽토(picto)[1]는 의미하고자 하는 바를 직접적으로 묘사한 그림을 통해
의미를 전달하는 표의문자이다. 상형문자, 단어문자의 이전 단계로서
원시적 문자이다. 현대에는 불특정 다수의 사람들이 빠르고 쉽게
이해할 수 있도록 나타낸 표의 문자이자 시각 디자인으로서 사용된다.

 

네이버

어떤 수치 따위를 알아보기 쉽도록 그림으로 나타낸 그래프. (=그림그래프)

그림인데, 어떤 대상/정보를 나타내는 뜻이라고 생각한다.

 

 

 

뇌 인지 차이 :픽토그램(추상화된 이미지) vs 텍스트

이 차이는 뇌에서 결정된다.

https://brunch.co.kr/@omniousofficial/2(왼), 경향신문(오른)

읽기의뇌, 대한소아청소년학회

 

눈을 통해 뇌로 들어가는 신경 신호가 일단 후두엽의 1차 시각피질로 들어간 다음
그 종류에 따라 별도의 처리 부위가 작동을 한다.

예컨대 아이가 “옛날 옛날에 철수라는 이름의 아이가 살았습니다.”라는 문장을 소리 내어 읽는다면,
1) 먼저 책을 눈으로 읽고 있으므로 1차 시각피질이 활성화
2-1) 청각피질에 저장된 단어 읽기 관련 정보와
2-2) 베르니케 영역을 통해 읽은 문장을 이해하려 할 것이다.

-대한소아청소년과학회-

 

뇌 정보 처리 방식

픽토그램은 뇌는 픽토그램을 하나의 전체적인 이미지로 인식한다. 이는 마치 사진을
보는 것처럼 빠르고 직관적인 과정입니다. 시각 피질에서 형태, 색깔, 공간적인 관계
등을 종합적으로 분석하여 의미를 파악한다.

텍스트는 개별 문자를 인식하고, 이를 조합하여 단어, 문장으로 해석하는 복잡한 과정을
거친다. 뇌는 시각 피질뿐만 아니라 언어 처리 영역까지 활성화되어야 하므로 시간이 더
오래 걸린다.

 

뇌 기억 처리 방식

픽토그램 시각 정보는 장기 기억과 긴밀하게 연결되어 우리는 이미지를 통해 경험한 것을
더 생생하게 기억하는 경향이 있다. 따라서 픽토그램은 텍스트보다 더 쉽게 기억되고 연상
작용을 일으킨다.

텍스트는 주로 의미를 기억하는 방식으로 저장된다. 하지만 이미지와 연결된 텍스트는 더
오래 기억되고 쉽게 떠올릴 수 있다.

 

픽토그램을 사용하는 이유:

• 보편성: 언어를 몰라도 누구나 쉽게 이해할 수 있기 때문에 국제적인 의사소통에 효과.
• 직관성: 그림을 통해 정보를 전달하기 때문에 복잡한 설명 없이 빠르게 의미를 파악 가능.
• 기억력 향상: 텍스트보다 시각적인 정보가 더 오래 기억되기 때문에 정보 전달 효과가 높음.
• 문화적 차이 극복: 언어는 문화에 따라 다르지만, 그림은 보편적인 언어이기 때문에 문화적 장벽을 넘어 소통 가능.

 

아마도, 직관성이 가장 유의미한 이유가 될 것.

 

 

픽토그램은 언제 탄생했는가?

아마도 인간이 동굴 벽화를 그릴 때부터?

선사시대:
동굴벽화나 바위 그림 등을 통해 사냥, 생활 모습 등을 기록하고 의사소통을 하던 것이
픽토그램의 가장 초기 형태.

고대 문명: 
이집트 상형문자, 수메르 문자 등은 그림과 문자의 결합으로 발전한 픽토그램의 대표적인 예.
이 시기에는 종교적인 의식, 사회 질서 유지 등 다양한 목적으로 픽토그램이 사용.

근대 이후: 
18세기 프랑스 파리에서 교통 표지판을 위해 그림 기호를 사용한 것이 현대적인 픽토그램의 시작.

 

 

그렇다면 IT에서는?

제록스

제록스는 1970년대 초에 최초의 GUI(그래픽 사용자 인터페이스)를 개발한 것으로 알려져 있다.
이 GUI는 엄청난 비용이 드는 연구용 컴퓨터인 제록스 알토에 적용됐다. 그 중 약 2,000대만
판매되었기 때문에 실제로는 '소비자' 기계가 아니었다.

제록스, interaction design fundation

 

제록스 스타는 잘 기억되지 않으며 1983년 Apple Lisa가 출시되어 GUI의 일부로 아이콘을
사용하는 것이 인기를 끌었다. Apple Lisa의 아이콘은 제록스의 아이콘과 거의 동일했지만
일부 아이콘은 세부 사항에 조금 더 주의를 기울여 그려졌다.

 

 

 

참조
https://www.pediatrics.or.kr/bbs/index.html?code=infantcare&category=I&gubun=B&page=2&number=9597&mode=view&keyfield=&key=

https://circumicons.com/blog/the-psychology-of-icons-why-they-are-so-effective

https://www.interaction-design.org/literature/article/a-brief-history-of-the-origin-of-the-computer-icon