Metaphors on the Web HCI

Boyeon Son

November 14, 2011

Logo Time 로고를 디자인 하는 회사로서 “디자이너의 책상”을 적절한 Metaphor로

사용하였다.

다음페이지를 살짝씩 (제목만) 보이게 하여 노란색 화살표를 누르면 책상의 오른쪽으로 움직이도록 되어있으며 각 페이지당 책상의 아이템 중 연관성있는 아이템을 놓아서 Metaphor 의 효과를 높여주었다.

예를 들면 포트폴리오에는 카메라, 페키지에는 씨디 커버등이 놓여있다.

https://www.logotime.com

Dripping in Fat Print T-shirt 를 파는 쇼핑몰인 “Dripping in Fat” 이라는 사이트도 Metaphor 를

적절하게 사용하였다.

짂짜 티셔츠를 옷걸이에 걸어놓은듯한 디스플레이와 특이한 customized print 가 새겨짂 티셔츠의 특징을 잘 표현해주는 페인트 등이 Metaphor 의 예이다.

거의 모든 쇼핑몰에 있는 Shopping Cart (장바구니) 기능은 실제로 쇼핑을 할때 이것저것 담아놓고 골라 계산하는 실생활의 좋은 Metaphor이다.

https://www.drippinginfat.com/

Google+ 구글에서 새로 선보인 Social Network Service인 Google+ 에서는

기능적으로는 기존에 Facebook 과 겹치는 부분이 많지만, Metaphor 를 이용한 표현을 많이 사용하려고 애쓴 부분이 눈에 띈다.

예를들면, 기존에 SNS 에서는 Groups, Video Chat, Keywords, Group Chat 등으로 약갂은 밋밋하게 표현됬던 기능들이 Circles, Hangouts, Spark, Huddle 등의 그 기능들과 연관되는 Metaphor 로 표현되어 있다.

또한 각 기능들에 다른 색깔을 입힘으로서, Colour Metaphor 을 사용한 흔적도 보여짂다.

http://www.google.com/intl/en_uk/+/demo/

Cultured Code “Cultured Code”라는 Mac용 App 사이트인데, Development Status 를 비행

스케쥴의 Metaphor 를 이용하여 표현했다.

현재 짂행되고 있는 업데이트 소식을 지루하지 않게 보여주고 있다.

http://culturedcode.com/status/