티스토리 툴바


간단하고 멋있다. - 소파

UI&UX 2012/01/25 13:12


이케아의 혁신적인! 소파카탈로그.
가장 절제된 형식과 눈을 뗄 수 없는 영상전개에 박수!
http://demooo.com/ikea/ikea-soffor/en/ 
저작자 표시 비영리 변경 금지
크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

[웹사이트] 증강된 현실을 다루는 두 가지 방법 - Agencynet, 2GH

UI&UX 2010/05/31 18:33

[들어가며]


온라인을 현실감 있게 다루는 것은 현재는 크게 두 가지 관점에 기인합니다.
Quake 처럼 3D로 현실의 세계를 구축해 두는 방법,
그리고 다음 로드뷰등에서 볼 수 있는 현실을 배경으로 하되, 그 안에 가상적인 요소를 녹여내는 법.

공교롭게 거의 비슷한 연배를 지닌 실력있는 크리에이티브 그룹 둘이
그 차이를 극명하게 보여주고 있어 흥미를 자아냅니다.  

두 그룹 모두 Reality - 현실성을 컨셉으로 그동안 축척해 둔 방대한 자료들을 풀어내며
회사의 전문성과 역량을 표현하고 있습니다.
이런 전략들은 '사무실'이라는 공간적인 기본 배경의 공통점으로 까지 보여지고 있습니다.

그러나 여기까지 입니다.
이런 얼핏 유사해 보이는 요소들은 전혀 다른 UI전략으로 펼쳐지고 있거든요.

[Agencynet]

청정원 CF 중에 이승기가 ‘정원이가 벗었다’며 얼굴을 붉히는 장면이 있지요. NUDE. 식품업계를 위시하여 많은 업체들이 요즘 이런 무첨가 무가공의 트렌드가 붐입니다. 또한, 좀 더 현실이 아닌 곳에서 현실성을 느끼려는 노력들이 많이 발생하고 있지요. 3D, 4D의 영화, 그리고 이러한 컨셉을 차용한 사이트가 유행으로 번지고 있으니 말입니다.

이런 ‘꾸밈없는, 자연스러운’ 부분과 3D에 대한 트렌드를 파악한 치밀한 전략이건, 아이덴티티와 기술력으로 한판 승부를 보고 싶었던 간에 agencynet의 사이트는 결과론적으로 이러한 두개의 주류를 잘 잡고 들어갑니다.

                                       <agencynet : http://www.agencynet.com/>

Agencynet은 자신의 사이트에서 정교하게 3D이미지로 실제 사무실 환경을 구현해냈습니다. 생생한 질감의 건물과 쇼파등의 집기와 사람들의 모습이 실제의 그것을 탐험하는 듯한 느낌을 주지요. 열정적인, 그러나 재미와 발전요소가 숨어 있는 사무실의 환경과 직원들이 그것을 누리고 있는 분위기는 Agencynet을 직접 경험하지 않더라도 충분히 느낄 수 있게 합니다.


또한 각 컨텐츠에서 보여지는 view는 무비, 포스터 리스팅 형태, 전광판 게시형태 등 다양함을 주고 있어서 자칫 건물 자체에 ‘갇혀 있기’ 쉬운 구조를 탈피하고 있습니다. 이런 노력은 사용자에게 각 요소를 효과적으로 볼 수 있도록 하지요. 또한 필기 인식 기술 등 Mobile에서 주로 사용하는 기능을 과감히 채용해 기술적 역량 또한 드러내고 있답니다.


이러한 자부심 넘치는 메뉴구성, 자신들의 기술과 기획력을  쏟아 부은 혁신성은 고객에게 회사가 어필하고자 하는 부분을 적극적인 방식으로 전달해 줄 수 있다는 점에서 강한 임팩트가 느껴집니다. 하지만 자칫, 통일성이 떨어져서 산만해지고, 트랜드에 익숙하지 않은 고객은 사이트 자체를 서핑하는 것을 어려워 할 수 있다는 점은 간과해서는 안될 것 같습니다.

[2GH]
Grimm Gallun Holtappels(2GH)의 사이트는 단순함이 묻어납니다. 하지만 꼼꼼히 들여다보면 볼수록 치밀함에 감탄하게 되네요. 15년의 업력을 가진 크리에이티브 그룹의 다양한 이야기들을 이 트렌드 속에 창의적으로 면밀히 녹여내는 그들의 아이디어와 실험정신, 기획력이 느껴집니다.

                                              <2gh : http://www.2gh.de/>

크리에이티브 그룹 2gh는 증강현실의 트렌드를 E-branding과 결합시켰습니다. 그 주 무대는 바로 밝고 온화한 느낌의 사무실입니다. 미국 agencynet3D실사보다는 가벼우면서도 어디에도 속하지 않는 자유, 즐거움으로 일하는 회사의 성격을 잘 나타내고 있지요.


각 사물을 가지고 메뉴를 매치하는 방법이 아닌, 공간을 배경으로 활용하는 부분이 은유적입니다. 시선을 돌리듯 마우스를 왼-오른쪽으로 돌림에 따라 컨텐츠 리스팅이 되어 매트릭스에서 메뉴를 선택하는 듯한 느낌과 함께 재미요소를 부여하고 있습니다. 3D의 입방체는 각 면에 컨텐츠를 가지고 있어서 상/하, 좌우에 따라 리스팅이 되지요. 이렇게 2GH는 단순한 시나리오에 증강 현실이라는 모티브를 적용한 점이 질리지 않는 재미를 부여하고 있습니다.

[나가며]

내가 살고 있는 환경을 가공의 환경 속으로 창조해 내려는 것이 욕망. 그 오래된 욕망은 기술의 발전에 따라 점점 실제 삶을 둘러싸고 있습니다. 사실 제 관점에서는 이러한 방식이 개인은 점차 고립되가면서 다른 창구로 그 '실제'의 문제를 풀어가려는 아이러니로 보여집니다. 위와 같은 시도들이 필요하다는 점은 인정하지만 한편으로는 화분에 꽃 한그루를 심고, 친구와 얼굴 볼 약속을 잡는 것이 더 우리 생활을 '실제'적으로 만드는 것이 아닐까 합니다.

저작자 표시 비영리 변경 금지

크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

[웹사이트] 파스텔 환상의 동화속에 숨겨진 치밀한 진실 - dejco

UI&UX 2010/04/18 16:48


 

늘로 날아오르는 꿈을 꾸었던 적이 있습니다. 

 

그러고 나면 이불에 지도가 그려져 있곤 했죠. 

브루노의 그림책을 보면서 숫자를 알고, 곱고 예쁜 옷을 입혀두어도 금방 더러워지던 그 시절.

자고 일어나면 자라 있던, 그래서 하늘만큼 커질 것 같았던

그 때를 추억하는 곱디 고운 일러스트와 잔잔함이 펼쳐진 사이트. DJECO(드제코)입니다.

 

아이를 키우는 집에서라면 한번쯤 만나보았을 만한 브랜드이죠.

드제코는 곱고 예쁜 일러스트로 유명한 프랑스 디자인 전문회사로 어린이의 미적 감성, 창의력을 키워주는 다양한 장난감, 인테리어용품등을 제작하고 있습니다.

 

사이트에서 캐릭터 ‘Goodies’는 드제코를 사용하는 어린이들의 꿈, 어린이들의 세상을 보여줍니다.

Goodies는 마치 어렸을 때 꾸던 꿈 처럼 모자와 망또를 쓰면 하늘을 마음대로 날아다닐 수 있구요.

아기자기한 드제코 일러스트가 가득한 세상을 마음껏 날아다닙니다.

드제코가 고객에게 심어줄 수 있는 꿈이자 마케팅 전략이죠.

 


 

드래그하고 휠을 돌리는 간단한 동작이 마치 팝업 동화책을 넘기는 듯한 

큰 동작의 화면전환을 만들어 내고 있는 점이 인상적입니다.

또한 스크롤 없는 텍스트의 간결함. 큼직한 지시 버튼은 이러한 사용자의 행동을 유도하고

퐁퐁 떠 오르는 느낌, 캐릭터가 마우스를 따라 나는 높이를 변화 시키는 동작은

게임적인 요소가 가미되어, 주 타겟의 몰입도를 증가시키고 있네요.

또한 배경의 경쾌한 휘파람 사운드와 캐릭터가 화면 전환시 이동을 위해 날아다니는

사운드들이 친근함을 배가하는 요인이 되고 있죠. 

 


 

드제코 회사의 분위기는 빛이 가득 들어오는 유리창을 가지고 있는 화실,

아뜨리에의 느낌으로 표현하고 있는데요, 그림을 즐겁게 그리는 캐릭터들이 까닥까닥 움직이고

한편에서 꼼꼼한 검사를 하는 모습을 통해 드제코의 제품의 핵심인 예술성과 안정성

명확하게 보여주고 있습니다.. 제품을 알려주는 Collections에서는

아기방, 여자어린이,남자어린이, 거실, 부엌등 드제코 제품이 녹아 들어갈 수 있는 환경

팝업북 방식으로 재미있게 보여주면서 주요 상품을 재미있게게 인테리어해 두어

사용자들에게 상품을 노출 시키고 어떻게 활용 할 수 있는지도 인지할 수 있도록 한

꼼꼼한 배려가 돋보입니다.

 

동화 속 세상을 돌아다니면 마음이 한결 맑아지는 느낌입니다.

Goodies와 함께 하늘을 붕붕 날아보세요. ^^

저작자 표시 비영리 변경 금지

크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

[웹사이트] 음악의 길을 경쾌하게 걷다. Walk the line Festival!

UI&UX 2010/04/12 17:42


뮤직 페스티벌~ 하면 무엇이 생각나시나요?
어두운 밤. 거센 조명, 거칠게 샤우트하는 싱어들, 땀이 흥건이 젖은 무대,
이빨로 기타를 물어뜯고 뒹구는 뮤지션, 미친듯 열광하는 팬들.
저는 이런 이미지들이 떠오릅니다만
어떤 분들은 브리티쉬 팝 밴드 같이 댄디하고 소프트한 느낌을
사이버틱한 몽환성 있는 자미로콰이 풍을 떠올리실 수도 있겠지요.

하나의 사운드, 한 장르의 뮤지션만 있으면 좋으련만,
북적북적 뮤직 페스티벌을 벌일라치면 이런 다양성의 혼재로
홍보를 비롯한 마케팅쪽은 컨셉고민에 머리가 아프기 시작하죠.

이전에는 일반적인 롸커. 사운드를 중심으로 하는
약간 직접적인 비주얼이 많았었더랬죠.
하지만 트랜드는 변합니다. 요즘은 요런 소프트한 느낌의 컨셉도 자주 보이네요.
(참고 Green Pluged Festival (플렉서스 라인, 쿡카스텐 등 출현))


http://www.greenplugged.com/

요거이 우리나라에서만 있는 귀염성이냐? 노우노우.
네덜란드의 뮤직 페스티벌 Walk the line festival.
40명의 아티스트들이 5월 14~15 양 일간 헤이그 곳곳에서 벌이는 축제인데요,
이 곳의 온라인 사이트는 캐릭터의 비주얼적인 귀여움을 넘어서
자체를 장난기 가득한 인터렉티브 공간으로 펼쳐냅니다.

컨셉은 공장의 코믹한 기계부품들입니다.
가는 펜으로 쓱쓱 그린 장난감 같은 파이프, 톱니, 기계판, 로봇머리등이
꾸룩꾸룩 뿡뿡 사운드와 함께 돌아가는 모습이 시선을 잡아끕니다.
이러한 스케치적인 표현은 로고에서 부터 시작되어 커스, 버튼, 로케이션 맵에 이르기까지
일관성 있게 지속되어 WTL의 아이덴티티를 나타냅니다.

인터렉션은 화면 곳곳 자연스럽게 녹아들어가 있습니다. 
스크롤도 보이지 않습니다.
클릭하여 드래그하면 장갑낀 손이 화면을 잡아당기는 듯한 효과를 주면서 움직입니다.  
사용자는 기계적이지 않은 이런 효과들에 오히려 즐거움을 느낍니다.  


 
40팀에 달하는 아티스트들을 기계 부품의 서로 다른 조합속에
일렬로 리스팅 하여 사이트의 유니크한 분위기를 유지하면서도
사이드에 알파벳 순으로도 조회기능을 살짝 달아 둔 센스있는 배려가 돋보입니다.
인터렉션 효과에 자칫 잃어버릴 수 있는 사용자 편의를 고려한 것이지요.
 



킬러앱을 찾고 있으신가요?
Bouw Je Eigen Wtl-Machine 버튼을 눌러보세요.
'본인의 머신을 직접 설계해 보세요' 라는 뜻인데요,
이 사이트를 구성하고 있는 기계 부품들을 다양한 색과 방향으로 조합해
자신만의 머신을 만들수 있습니다.
저장도 가능하고, 우수한 디자인은 공식 티셔츠에도 적용될 수 있습니다. 메일로도 전송이 가능하지요.
만들다 지치면 Gallery에서 다른 사람들의 작품도 감상할 수 있습니다.

이런 유머러스함을 재미있게 경험하다보니
뮤지션의 면면을 살피기도 전에 페스티벌에 대한 흥미가 솟구치게 되네요.
경험이 욕구를 만든다고나 할까요?
잘 만든 인터렉션 사이트 하나가 열 홍보물 부럽지 않습니다.
자꾸자꾸 둘러보고 놀고싶은 사이트 WTL에서 5월을 기다려봅니다.

저작자 표시 비영리 변경 금지

크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

[웹사이트] 깨물어주고 싶을 만큼 사랑스런 엉덩이 - SoftBank 젤리빈

UI&UX 2010/04/08 11:39

제가 일본사이트를 선호하는 이유는 귀차니즘도 단단히 한 몫합니다.
유저의 반응을 멍하니 기다리고 있지 않고 알아서 움직이고 돌아가는 사이트.

SoftBank에서 이번 출시한 젤리빈 핸드폰 사이트도 그 맥을 같이하고 있습니다. 

 

일곱빛깔 핸드폰들이 각각의 색에 맞는 캐릭터와 함께
신나게 춤추는 애니메이션이 풀 스크린으로 제공됩니다.
이는 마치 가상의 젤리빈 월드에 있는 듯한 경험을 제공합니다.

이 흥겨운 애니메이션에서 관심 핸드폰을 선택하려면 집중력이 꽤 필요합니다만
그 불편도 마치 게임처럼 느껴지도록 유도하여서 사용자의 몰입도를 높입니다.
 
선택한 핸드폰에서는 7가지로 요약된 제품 정보들이 나타납니다.
단순히 클릭을 유지한 채 마우스 휠을 위 아래로 돌리면 됩니다.
2~3줄짜리의 초 간단 정보이지 단순한 조작으로 큰 액션이 일어나며 팝업되는 효과가 재미있어

자꾸 돌려보게 됩니다.  

 


 

차라리 벗고 있지, 젤리빈 엉덩이에 있는 팬티가 좀 변태스러워 보이는건
저 혼자의 생각일까요?
재미있는 CM을 보시면 보시면 그 이유를 조금쯤 공감하지 않을까 합니다.

 

애니메이션 외에 제공되는 컨텐츠는 CM(홍보영상), 부가서비스 및 메뉴뿐입니다.
참. Twitter사용자는 이 흥겨운 젤리빈 파티에 친구들을 초대할 수도 있으니 참고하세요.

 

독특한 캐릭터, 잠깐의 인터렉션 애니메이션과 흥겨운 분위기만으로
사용자에게 젤리빈이라는 브랜드를 효율적으로 노출시키고 각인시키고 있습니다.
온라인 마케팅 본연의 의무를 다하고 있는 수작이라고 하겠네요.

 

그럼. 젤리빈 월드의 흥겨운 전자음악과 함께 단스단스 고고~

저작자 표시 비영리 변경 금지

크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

[웹사이트] MUJI rhythm - 상품들의 즐겁고 드리미컬 한 놀이터

UI&UX 2010/04/07 15:25

전에 유니끌로 사이트를 소개해 드렸죠.

직관성으로 말할 것 같으면 일본인들의 그것을 따라 올 곳이 없어보입니다.

 

이 사이트는 제멋대로입니다.

음악과 드리미컬한 움직임. 그리고 귀찮게 마우스를 갇다 대지 않아도 스스로 틱톡 거리면서 자세히,

또는 짤막하게 상품을 보여주고 때로는 갑작스레 TV광고가 흘러나옵니다.

그러나 그것이 매력입니다. 눈을 떼지 못하고 그 흐름에 맡겨버립니다.

 

우리나라의 기업마인드로는 이런 몰 사이트가 과연 나올수 있을까 의문이 듭니다. ^^ 

휙휙 휘파람소리가 경쾌한 무지의 rhythm site.

춤추는 상품들의 신나는 놀이를 같이 감상해 보시죠.

 

저작자 표시 비영리 변경 금지

크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

웹상에서 집단의 특징

UI&UX 2008/02/28 13:56

사용자들은 스스로에게 필요한 일을 한다.

사용자들은 타인과의 관계에서 스스로를 드러내 보이고자 한다.

사용자들은 경제적인 보상 이외에 명예를 원한다.


(ZDNet에 게제된 글 중 일부 발췌 -사용자의 참여동기부여와 레퓨테이션 : 랭키닷컴 이승중 과장)




크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

파란 메일 서비스, 기능 업그레이드

UI&UX 2007/11/27 07:38
김효정 기자 ( ZDNet Korea )   2007/11/13

파란은 메일 서비스를 업그레이드 개편하고, 사용자 편의성 및 자율성 강화를 위해 태그 분류 및 UI 자유 변경 등의 기능을 지원한다.


먼저 파란은 블로그처럼 메일 화면 구성을 사용자 취향에 따라 자유롭게 구성 및 변경할 수 있도록 편리한 UI 변경 기능을 제공한다. 편지 리스트나 최근 받은 편지, 자동삭제 예정편지 등 내가 편리한대로 메뉴 구성 및 위치 조정을 할 수 있으며, 스킨 색상도 선택이 가능하다.

또한 이번 개편에서 포털 최초로 블로그나 UCC 게시물 등에서만 적용되던 태그 기능을 메일에 적용했다. 사용자는 각 메일 별로 최대 5개까지 태그를 설정할 수 있어, 자신이 원하는 카테고리에 따라 메일을 분류하거나 검색할 수 있다.

태그 기능은 기계적으로 특정 키워드가 포함된 문서를 필터링하여 보여주는 일반 키워드 검색과 달리 같은 검색결과라도 내가 입력한 태그를 통해 내가 원하는 메일만 찾아볼 수 있다는 점에서 보다 편리하게 사용할 수 있다.

이 밖에도 1분마다 자동 저장되는 메일 자동저장기능과 자유로운 파일 첨부 위치 지정, 카테고리별 편지지 정리 기능 등도 제공된다.
크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

홈페이지 유저빌리티 가이드

UI&UX 2007/08/14 12:51
콩깍지님 사이트에서 업어온 글입니다.
저도 이렇게 정리하려고 했는데 혹시나 해서 찾아봤더니 있더군요.
콩깍지님 감사~ http://blog.naver.com/tb/corea0/80036986055

사이트의 목적을 알려라


1. 회사 이름과 로고는 적당한 크기로 눈에 잘 띄는 위치에 배치하라. (좌측상단)
2. 사이트나 회사에서 하는 일이 무엇인지 명확하게 요약한 태그라인을 포함시켜라.
   - 회사 이름 자체가 회사가 하는 일을 설명하거나 아주 유명한 회사인 경우에는 생략 가능
3. 사용자의 관점에서 가치가 있는 것이 무엇이고 주요 경쟁자들과의 차별성이 무엇인지를 강조하라.
   - 간략하게 설명할 수 있다면 태그라인에 그 내용을 넣어라.
4. 최우선적인 임무를 강조해서 사용자들이 홈페이지에서 명확한 출발점을 알 수 있도록 하라.
   [주의1] 모든 것을 강조하면 초점이 흐려진다.
   [주의2] 사용자들의 관점에서 가장 중요한 임무가 무엇인지 파악하라.
5. 한 사이트에서 공식 홈페이지(Home)는 하나만 분명하게 지정하라.
6. 회사의 웹사이트 전체를 지칭하는 것이 아니라면 '웹사이트'란 용어를 사용하지 마라.
7. 홈페이지(Home)는 사이트의 다른 페이지와는 다르게 디자인하라.





회사에 대한 정보를 제공하라


8. 회사소개, 투자자 홍보, 보도실, 채용과 같은 회사에 대한 정보는 한 장소에 묶어두라.
9. 'About Us' 섹션으로 연결되는 링크를 홈페이지에 마련하라.
   - 링크명은 'About <회사명>'으로 하고, 이 섹션에서는 사용자들이 회사에 대해 전체적으로 파악할 수 있도록 회사의 제품, 서비스, 회사 가치, 비즈니스 제안, 관리팀 등 관련 정보를 제공하라.
10. 회사를 언론에 보도되도록 하려면 '보도실(Press Room)'이나 '기자실(News Room)' 링크를 홈페이지에 마련하라.
11. 웹사이트를 회사와 분리되지 않도록 명칭 등에 있어서 통합된 포맷을 유지하라.
   - 단, 웹에서만 가능한 서비스, 다른 매체에서만 가능한 서비스는 구별하라.
12. 회사의 연락처에 관한 모든 정보를 담은 페이지로 가는 'Contact Us' 링크를 홈페이지에 마련하라.
13. '문의사항 처리(Feedback)' 링크를 제공하려면 링크의 목적과 문의에 대한 처리를 고객 서비스 부서에서 하는지, 웹마스터가 하는지를 명시하라.
14. 직원들을 위한 정보(회사 내부 정보)는 대외용 웹사이트에 올리지 마라.
15. 사이트에서 고객에 대한 정보를 수집한다면 '개인정보 보호정책(Privacy Policy)' 링크를 홈페이지에 마련하라.
16. 말하지 않아도 알 수 있는 것이 아니라면 웹사이트에서 어떻게 수익을 올리는지 설명하라.
   - 사용자가 비즈니스 모델을 쉽게 이해 할 수 있도록 하라








컨텐츠를 한눈에 파악하게 하라


17. 사용자들이 사용하는 용어를 사용하라.
   - 특히 섹션과 카테고리 라벨은 회사의 입장이 아닌, 고객의 입장에서 해야 한다.
18. 동일한 항목을 강조하기 위해 홈페이지에서 반복하지 마라.
   [대안] 어떤 항목을 강조하려면 한 장소에서 명확하게 눈에 띄도록 처리하라.
   [예외] 사용자들이 어떤 컨텐츠를 지칭하는 데 여러 단어를 사용한다면, 같은 페이지로 연결되는 여러 명칭의 링크가 도움을 줄 수도 있다.
19. 홈페이지에는 애매모호한 용어를 사용하지 마라.
   - 홈페이지에서 가장 중요한 것은 정보 전달력이다.
20. 대문자 표기나 그외의 다른 스타일 표준을 일관되게 적용하라.
21. 설명하지 않아도 알 수 있는 컨텐츠라면 따로 제목을 붙이지 마라.
22. 세부 항목이 하나뿐인 카테고리는 피하라.
23. 꼭 붙어있어야 할 필요가 있는 단어가 있는 문장은 의미에 따라 줄바꾸기 하라.
24. 약자, 두문자 약어가 처음 나올 때는 철자를 풀어쓰고 바로 이어서 약어를 써준다.
   [주의] 네비게이션 링크에 설명이 없는 약어 사용은 특히 피해야 한다.
   [예외] DVD와 같이 일반화된 약어는 상관없다.
25. 감탄 부호는 사용하지 마라.
   - 홈페이지에 있는 모든 항목들이 중요도가 높은 것이다.
26. 전부 대문자인 포맷 스타일의 글자는 가독성이 떨어지므로 되도록 사용하지 마라.
27. 강조하기 위해 자간이나 구두점을 부적절하게 사용하지 마라.
   - '성 경 퀴 즈', '성.경.퀴.즈', '/성/경/퀴/즈' 등은 '성경퀴즈'를 찾는 사용자들에게 검색이 안 될 수도 있다.








샘플 컨텐츠를 제시하라


28. 제목으로만 카테고리를 설명하려하지 말고 샘플 컨텐츠를 제공하라.
29. 각 샘플에는 그 샘플에 대한 상세 정보가 있는 페이지로 연결되는 링크를 제공하라.
   - 샘플 링크가 (일반적인) 카테고리 목록 페이지로 연결된다면 사용자는 당황하게 된다.
30. 구체적인 샘플 옆에는 상위 카테고리 링크를 제공하라.
31. 각 샘플에 대한 상세 정보로 연결되는 링크와 해당 카테고리에 대한 일반 정보로 연결되는 링크는 명확하게 구별하라.
   - 샘플에 대한 상세 정보 링크는 샘플 정보 바로 옆에, 카테고리 링크는 흰여백을 경계로 구분한다.








자료실과 지난 컨텐츠를 제공하라


32. 이전에 사이트에 있었으나 현재 홈페이지에서 제공하지 않는 정보를 쉽게 찾을 수 있도록 하라.
   [대안] 자료실 제공, 지난 컨텐츠 링크 목록 제공, 영구적인 URL 링크 제공 등








링크의 가이드라인을 준수하라


33. 링크는 정보를 담고 있는 단어로 시작하라.
   - 가능한 구체적이고 짧게 하고, 뻔하거나 반복적인 정보(회사명과 같은)는 포함시키지 마라.
34. 링크 제목에는 '여기를 클릭하세요(Click Here)'처럼 일반적인 지시어를 사용하지 마라.
   - 연결되는 페이지의 내용을 잘 설명해 주는 단어만을 사용하라.
35. 목록 아래에 'More...'와 같은 일반적인 링크는 사용하지 마라.
   - 추가적인 내용이 무엇인지 구체적으로 설명하라.
36. 방문했는지 방문하지 않았는지 링크 색상으로 구별할 수 있도록 하라.
37. 링크를 지칭하는 데 '링크'란 말을 사용하지 마라.
   - 링크는 밑줄을 치고 청색으로 표시해서 설명하지 않아도 알 수 있게 하라.
38. 오디오, 비디오 파일 등 다른 애플리케이션이 필요한 링크에는 아이콘을 사용하여 표시하라.








네비게이션은 홈페이지의 얼굴이다


39. 주요 네비게이션은 페이지의 본문 바로 위와 같이 아주 눈에 잘 띄는 곳에 배치하라.
   - 배너 광고처럼 보이지 않도록 주의하라.
40. 네비게이션 항목에서 비슷한 항목은 한 곳으로 그룹화하라.
41. 동일하거나 비슷한 유형의 링크를 여러 영역에 제공하지 마라.
42. 홈페이지에서는 로고나 'Home' 등의 홈페이지로 연결되는 링크를 클릭할 수 없게 만들어라.
43. 네비게이션 카테고리 제목에 조어를 사용하지 마라.
44. 사이트에 쇼핑 카트(장바구니) 기능이 있다면 홈페이지에서 쇼핑 카트로 바로 연결되는 링크를 제공하라.
45. 단순 텍스트 링크만으로도 카테고리 제목을 충분히 구별할 수 있다면 가급적 아이콘을 사용하지 마라.
   - 아이콘은 즉시 컨텐츠를 파악할 수 있는 경우에만 사용하라.








검색 도구를 사용하라


46. 홈페이지에는 검색 페이지로 연결되는 링크가 아니라 바로 검색어를 입력할 수 있는 입력창을 제공하라.
47. 입력창은 충분히 넓어야 한다. (알파벳 기준 25~30자)
48. 검색창 영역에 제목을 붙이지 말고, 입력창 오른쪽에 '검색(Search)' 버튼을 사용하라.
   - 'Search'라는 제목에 'Go'라는 버튼보다, 제목없이 'Search' 버튼만 있는 것이 훨씬 간결하다.
49. 홈페이지에는 단순 검색 기능만 제공하라.
   - 고급 검색 기능이나 검색 팁이 있을 경우에는 그에 대한 링크만 제공하라.
50. 홈페이지에서의 검색은 사이트 전체에 대한 검색으로 기본 설정되어 있어야 한다.
   - 검색 범위가 제한되어 있을 경우에는 반드시 명시한다.
51. 사이트 검색 기능에는 '전체 웹 검색' 기능을 제공하지 마라.
   - 사용자들이 전체 웹에서의 검색을 할 때 선호하는 검색엔진이 따로 있게 마련이다.








툴과 단축키는 신중히 사용하라


52. 사용자들이 중요도가 높은 임무에 바로 접근할 수 있도록 구성하라.
53. 아주 핵심적이고 우선순위가 높은 임무를 처리해주는 것이 아니라면 홈페이지에서 보여줄 필요가 없다.
   - 사용자들이 필요해서가 아니라 제공할 수 있기 때문에 제공하는 서비스는 삼가한다.
54. 북마크하거나 브라우저의 '시작페이지'로 설정하는 것과 같이 브라우저에서 기본적으로 제공하는 기능을 사이트에서 별도로 제공할 필요는 없다.








그래픽과 애니메이션


55. 그래픽은 장식적인 요소보다는 실제적인 컨텐츠로서의 가치를 가져야 한다.
   - 컨텐츠와 관련성이 없는 그래픽은 중요한 컨텐츠로부터 사용자들의 관심을 빼앗는다.
56. 그래픽이나 사진이 관련 기사 내용의 의미를 명확히 전달하지 않는 경우에는 캡션을 달아라.
   - 인물 사진에는 항상 캡션을 다는 것이 좋다.
57. 디스플레이 크기에 맞도록 사진과 다이어그램을 적절히 편집하라. (축소 & 잘라내기)
58. 워터마크가 있는 그래픽을 사용하지 마라.
   - 복잡하고 페이딩 아웃 처리된 그래픽, 배경 이미지 위에 텍스트가 있는 그래픽은 판독하기 어렵다.
59. 애니메이션을 홈페이지의 한 항목에 사용자들의 관심을 끌어들이기 위한 목적으로 사용하지 마라.
   - 사용방법 설명 등을 위한 애니메이션처럼 컨텐츠로서 가치가 있는 것이라도 홈페이지에 사용하는 것은 부적절하다. 홈페이지에는 사용자들의 관심을 끌기 위한 것들이 많다.
60. 로고, 태그라인, 주요 헤드라인과 같은 페이지의 핵심적인 요소는 절대로 애니메이트시키지 마라.
61. 플래시 인트로 페이지를 보여주고 싶은 경우는 그것을 디폴트로 설정하지 말고 사용자들이 선택할 수 있도록 배려하라.








그래픽 디자인은 사용자 중심이어야 한다


62. 페이지상에서 크기, 색상 등과 같은 폰트 스타일과 기타 텍스트 포맷은 제한적으로 사용하라.
63. 텍스트와 배경색이 선명하게 대비되도록 사용하여 글자의 가독성을 높여라.
64. 800 x 600 화면 사이즈에서 좌우 스크롤을 사용하지 마라.
65. 가장 핵심적인 페이지 요소는 800 x 600 스크린 크기를 기준으로 스크롤하지 않고 한 화면에 볼 수 있어야 한다.
   - 아래로 스크롤해야 볼 수 있는 컨텐츠가 있다면 그 내용이 아래에 있다는 것을 알리는 시각적 장치를 넣어야 한다.
66. 홈페이지 크기가 다양한 해상도에 조절될 수 있도록 유동적인 레이아웃을 사용하라.
67. 로고는 광고처럼 보이지 않도록 사려깊게 사용하라.
   - 제품, 정책이나 프로그램을 위한 별도의 로고는 내부용으로만 사용하라.








유저 인터페이스(UI) 도구


68. 불릿과 같은 도구는 반드시 클릭되도록 해야 한다.
69. 사용자들이 검색 기능을 기대하는 홈페이지 상단 부분에 여러가지 텍스트 입력창을 사용하지 마라.
70. 드롭다운 메뉴는 세부 항목을 보고 알 수 있는 것이 아니라면 함부로 사용하지 마라.








제목 표시줄의 역할


71. 제목 표시줄은 회사 이름과 같은 정보 전달력이 있는 단어로 시작하라.
   - 'Welcome', 'Homepage', 'a', 'the'와 같이 의미없는 단어로 시작되는 제목 표시줄은 북마크 목록이나 검색 결과 목록에서 차별적인 정보를 전달하지 못한다. 갖가지 도형으로 장식된 제목 표시줄도 마찬가지다.
72. '.com'과 같은 도메인의 기관 이름은 'Amazon.com'과 같이 회사명의 일부가 아닌 경우에는 제목 표시줄에 포함시키지 마라.
   - '.com'과 같은 사이트 이름은 온라인과 오프라인에서의 회사 존재를 인위적으로 구별하게 만든다.
73. 제목 표시줄에 '홈페이지'라는 말을 포함시키지 마라.
   - 사이트의 각 페이지는 서로 다른 제목 표시줄을 가지고 있어야 북마크나 검색 목록에서 다른 페이지들과 혼동되지 않는다. 홈페이지를 홈페이지라고 지정할 필요는 없다.
74. 제목 표시줄에 사이트에 대한 간단한 설명을 추가하라.
   - 짥고 명확한 태그라인을 갖고 있다면 그것을 제목 표시줄에 사용해도 좋다.
75. 제목 표시줄은 알파벳 기준으로 7-8 단어 미만, 총 64자 미만으로 제한하라.








URL은 간단하게 하라


76. 상업용 웹사이트의 홈페이지 URL은 "http://www.도메인.co.kr"로 되어야 한다.
   [주의1] 도메인 이름 다음에 복잡한 코드나 'index.html'과 같은 것을 추가하지 마라.
   [주의2] 사용자들이 입력한 URL이 유지되도록 하라.
   [주의3] 'www.도메인.co.kr', '도메인.co.kr'에 모두 연결되도록 하라.
77. 외국(특히 미국)에 주요고객이 있지 않다면 국가 도메인(.kr)을 사용하라.
   - 해외에도 주요고객이 있다면 '.co.kr', '.com' 모두 등록해 두는 것이 좋다.
78. 가능하다면 도메인 이름을 사이트의 대체 철자나 약어, 흔히 실수하는 철자로도 등록하라.
[사례1] Wal-Mart('-'이 있는 경우) --> 'http://www.wal-mart.com' or 'http://walmart.com'
[사례2] Victoria's Secret('s'가 중복되는 경우) -->'http://www.victoriassecret.com' or 'http://www.victoriasecret.com'
79. 대체 도메인 이름을 허용한다면 한 가지 도메인을 공식 버전으로 채택하고, 다른 도메인으로 접속한 사용자들은 공식 도메인 사이트로 보내주어라.
   - 온라인, 오프라인 홍보에는 공식 도메인 이름만을 사용한다.








뉴스와 보도 자료


80. 헤드라인은 최소한의 단어로 최대의 정보를 줄 수 있도록 간결하고 설명적이어야 한다.
   - 헤드라인은 전체 기사보다는 바로 아래의 부제와 관련성이 높아야 한다.
81. 홈페이지에서 실어주는 뉴스 기사나 보도 자료에 대해 요약 내용을 작성하고 편집하라.
   - 기사의 첫문장을 그냥 따서 사용하지 마라. 부제는 기사를 설명하지 말고 실제 내용의 요약이어야 한다. 사용자들의 클릭을 유도하기 위해 실제 내용을 감추는 것은 적절하지 못하다.
82. 부제보다는 헤드라인을 전체 기사로 링크시켜라.
   - 헤드라인을 눈에 띄는 링크 표시로 하기 어려운 스타일이라면, 부제 아래에 별도의 '전체 기사(Full Story)' 링크를 첨가하라.
83. 홈페이지의 모든 뉴스 기사가 1주일 이내에 발생한 것이라면 각 기사의 부제 밑에 날짜와 시간을 표기할 필요는 없다.
[예외] 단, 전체 기사 페이지에는 날짜와 시간을 눈에 띄게 표기해야 한다. 기사는 '오늘'이니 '다음 주'니 하는 상대적인 시간으로 언급하면 안 된다.








팝업 창과 스플래시 페이지


84. 메인 URL은 실제 홈페이지로 연결시켜주어야 한다.
   [예외] 스플래시 화면은 미성년자와 같은 일부 사용자들에게 부적절한 컨텐츠를 취급할 경우에만 적절하다.
85. 팝업 창을 피하라.
   [대안] 아주 중요한 정보는 홈페이지에서 눈에 잘 띄는 영역에 배치하라.
86. 제1의 언어가 없이 여러 언어로 된 웹사이트가 아니라면 경로 페이지를 사용하지 마라.
   - 사이트의 제1의 언어가 있다면 그 언어로 된 홈페이지로 바로 연결시키고, 여러 언어의 국제 버전 링크를 포함시켜라.








광고를 광고답지 않게 만들어라


87. 타사 광고는 페이지의 덜 중요한 장소에 배치하라.
   - 홈페이지의 중요한 항목을 배너 광고 위쪽에 배치하지 마라.
88. 페이지 상단의 표준 배너 영역이 아닌 곳에 광고를 배치하는 경우에는 광고와 사이트 컨텐츠를 혼동하지 않도록 광고라는 라벨을 붙여주어라.
89. 사이트의 일반적인 기사를 돋보이게 하기 위해 광고 형식을 사용하지 마라.








환영 메시지는 필요악이다


90. 사이트의 사용자들에게 환영 인사를 할 필요는 없다.
   [예외] 등록 회원의 로그인을 확인해 주는 환영 메시지는 적절히 잘 사용해야 한다.








기술적인 문제와 긴급 상황 대처법을 알려라


91. 웹사이트가 다운되거나 웹사이트의 중요한 부분이 작동되지 않을 경우에는 홈페이지에서 명확하게 공고하라.
   - 서비스 재개 시간을 명시하고, 대체 서비스를 제공하라. 준비 중인 서비스에서 '공사중' 메시지는 바람직하지 않다.








디자인에 대한 홍보를 하지 마라


92. 검색 엔진, 디자인 회사, 선호하는 브라우저, 기반 기술에 대한 정보를 위해 홈페이지 공간을 낭비하지 마라.
   [대안] 기술 지향적인 사이트에서는 'About Us'에 '사이트 운영기술(How We Run This Website)' 섹션을 포함하는 것이 적합하다.
93. 웹사이트로 상을 받은 경력은 홈페이지에서 자랑하지 않는 것이 좋다.
   [대안] 디자인이나 웹사이트 자체의 다른 측면에 대한 상은 'About Us' 영역에서 다루어야 한다.
   [예외] 제품, 서비스의 질, 고객과 관련된 분야로 받은 상은 홈페이지에 언급해도 좋다. 단, 너무 오래 공지하지는 마라.








페이지 리로드와 리프레시


94. 업데이트 사항을 사용자들에게 알리기 위해 홈페이지를 자동으로 리프레시 하지 마라.
   - 리프레시할 경우에는 뉴스 업데이트와 같이 실제로 변한 컨텐츠만 업데이트되도록 하라.








홈페이지의 개인화


95. 개인화된 정보를 제공할 수 있는 영역이 있을 경우, 일반화된 컨텐츠를 제공하지 마라.
   - 일반적인 환영 인사는 피하는 것이 좋다. 100명에게 똑같이 뿌려진 편지처럼 불쾌할 수도 있다. 어느 지역의 방문자인지도 모르면서 서울의 날씨를 보여주거나 하는 것도 좋지 않다.
96. 색상과 같은 유저 인터페이스의 기본적인 모양을 개인화하는 서비스를 제공하지 마라.
   - 보편적으로 가장 읽기 좋은 최고의 디자인을 만들어내는 데 자원을 집중하라. 단, 폰트 크기는 상대적인 크기로 해서 사용자들의 브라우저 설정을 존중하라.








사용자 등록과 혜택


97. 홈페이지에서 회원 등록을 위한 단순 링크를 제공하지 말고, 등록하면 얻게 되는 고객의 혜택을 설명하라.
   - 이메일 주소를 요청할 경우에도 그에 따른 혜택을 설명하라.








커뮤니티 사용


98. 채팅룸이나 토론방과 같은 사용자 커뮤니티는 단순 링크로 하지 말고, 홈페이지에 실제 토론 주제를 열거하거나 토론 스케줄을 제공하라.
99. 상업용 사이트에는 '방명록(Guestbook)'을 제공하지 마라.








날짜와 시간 표시


100. 뉴스나 실시간 채팅, 주가 등과 같이 시간이 중요한 정보에 대해서는 날짜와 시간을 표기한다.
101. 홈페이지에 시간을 표시하려면 컴퓨터에서 생성된 현재 시간이 아니라 컨텐츠의 업데이트 시간을 사용자들에게 보여준다.
102. P.M이나 p.m.처럼 표준화된 약어 표기를 사용하라.
103. 날짜 표시는 애매하지 않게 하라.
   - '01/02/03'과 같은 표기는 국가에 따라 다른 관습을 가지고 있어 애매하다. '2003년 1월 2일', '2003.1.2 (목)' 처럼 명확하게 표기해야 한다.








주가 지수와 숫자 표기


104. 주가 포인트처럼 상승이나 하락폭이 중요한 컨텐츠는 변화율도 표기하라.
105. 'IBM'과 같이 일반화된 약어가 아니라면 철자를 다 써준다.
106. 4자리 이상의 숫자에는 천 단위마다 '쉼표(,)'로 구분하라.
107. 숫자 컬럼은 소수점을 맞추어서 정리하라

크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

제이콥 아저씨의 UI 강좌 - 리치 인터페이스와 사용자 편의성

UI&UX 2007/08/10 17:49
UI의 대가. 제이콥아저씨의 Alertbox입니다.
2007/08/06자 글의 따끈한 나 홀로 요약입니다.
틀린점은 과감히 지적해주세요!~


more..


Feature Richness and User Engagement

원문보기

1) Right-click은 일반적으로 잘 쓰지지는 않지만
일부 숙련된 user들에게서 몇몇 기술적 작업을 할때 효율적으로 사용됩니다.

2) user engagement level
사람들은 대개 사용법을 배우는 것보다 하는 것을 좋아합니다.
하지만 처음 서비스를 접하는 사람과 이미 숙달된 사람들간에 대해서는
다른 정도의 UX를 적용해야 겠지요.
예로 photoshop을 들어보겠습니다.
 Photoshop CS - 전문가용,
 Photoshop Element - 간단한 편집기능,
 Photoshop Elbum - viewer
가격 크게 차이나고 무엇보다도 사용자가 익혀야 하는 기술들이 확연히 다릅니다.
(CS는 다루는 방법에 대해 1,622가지의 서적이 나왔을 정도라네요. 반면 CS 매뉴얼은
20여페이지...)

3) shallow engagement with website
자. 그래서 우리 웹사이트에서 어떻게 적용해야 할까요?
Photoshop Elbum 유저처럼 아주 간단한 프로그램을 사용하는 사람이라면
솔직히 매뉴얼 없이도 접근하기를 바라고, 그렇게 할겁니다.(gratification)

일반적으로 대개의 유저는 정보수렵(information foraging)을 합니다.
최근 제이콥아저씨의 책에서 밝힌 연구결과에서는
사용자들이 새로운 사이트에 방문했을때
메인페이지에 평균 30초간 시간을 보내고
사이트를 둘러보며 좀 더 볼 것인가를 판단하는데 2분미만의 시간을,
만약 좀 더 둘러보겠다고 마음먹었다면 평균 4분 미만을 보내는 것으로 조사되었습니다.

인트라넷은 일반 웹페이지와 성격이 좀 다른데요, 중간정도의 숙련도를 가진 유저가 활용하죠.
이유는 일반적으로 인트라넷은 한 회사마나 하나를 사용하고,
(뭐. 정보나 작업등을 다른사이트에서 할 수는 없으니까... 라는 의미이신것 같군요)
인트라넷에서의 작업들이 좀 더 업무에 특화된 것들이니까요.

web application에 대해서도 마찬가지입니다.
만약 사용이 복잡해지면, 사용자는 웹사이트에서 그랬던 것처럼 훌쩍 쉽게 떠나갈 겁니다.

고로, 아무리 돈을 많이 들인 정교한 사이트라도 이것이 없으면 사용자의 외면을 받을 거란 얘기.
"씸플 인터렉션 테크닉!!"

글 중 주요 link 몇개
웹사이트 가이드라인 -
guidelines for websites
어플리케이션 가이드라인 - guidelines for applications.
인터렉션 가이드라인 -
intranet design guidelines
크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

아이디어머신

UI&UX 2007/08/09 14:16

저는 재미있게 읽었습니다.

특히 아이디어를 만들어내기 위한 아이디어환경을 조성하는 아이디어를 내는 부분이
꽤 인상 깊었습니다.

저도 회사에서 딱딱한 사무실을 벗어나서
자유로운 공간에서 회의를 시도하려고 하는데
시간과 사람들의 인식이
"그렇게 까지 할 필요가 있느냐" 라는 반응...

급격스러운 변화도 때로는 필요하겠지만.
서서히 자연스럽게 그리고 상황에 따라 만들어가야 할 것 같습니다.
똑같은 회의실에서라도 사탕하나 물고 안물고의 차이가 있더라구요.

칠판에다가 브레인 스토밍한 자료를 찍어서 제안서에 올리는 것도 좋지만
이제는 MS surface쯤 두고 작업해서 결과물을 캡쳐하면 어떨까요?

... 테스터 모집 안하나?

크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan

[자작] 부동산 영문사이트 메뉴용어

UI&UX 2007/05/21 15:33
틀린 부분이 있으면 알려주세요.

분양정보 Sale in Apt.

/사업개요
About the Sale

/입지환경
Site Environment

/단지정보
Apt. Complex

/평형정보
Apt. Unit

/분양내역
Sale Specification

/첨단시스템
Hightech System

/인테리어
Interior

/'옵션/마감재'
Option/Finishing material

/공사현황
Construction Status
크리에이티브 커먼즈 라이선스
Creative Commons License
posted by Life is shining journey. HaRaHan