본문 바로가기

전체 글134

왜 스크롤이 새로운 클릭인가 이 글은 UX Movement가 선정한 2012년 UX관련 컬럼 베스트 중 하나인 "Why scrolling is the new click"를 한글로 번역한 것입니다. 어느쪽이 사용자에게 더 좋을까? 스크롤하기? 혹은 클릭하기? 이것은 페이지 흐름을 디자인할 때 반드시 생각해봐야할 질문이다. 클릭은 사용자에게 새로운 페이지로 이동하는 링크를 제공한다. 스크롤은 모든 컨텐츠를 다른 영역으로 나누어 한 페이지에 담아 제공한다. 여러 해 전에는 클릭이 이 질문에 대한 간단한 해답이었다. 만약 한 페이지를 너무 길게 만든다면 사용자는 위쪽 절반만 보고, 읽은 뒤 아래쪽 절반은 스쳐가듯 보거나 무시한다는 게 일반적인 생각이었다. 오늘날은 많은 것이 변했다. 많은 사용자들이 화면 맨 아래까지 스크롤해서 내려가고, .. 2013. 1. 7.
왜 '여기를 클릭하세요'라고 링크를 지정하면 안되는가 이 글은 UX Movement가 선정한 2012년 UX관련 컬럼 베스트 중 하나인 "Why your links should never say "Click Here""를 한글로 요약한 것입니다. "클릭"은 마우스에 너무 초점을 맞춘다. "클릭"이라는 단어를 사용하는 순간 사용자의 관심은 인터페이스에서 마우스로 옮겨간다. 링크를 클릭할 때 전혀 불필요한 주의를 불러일으키는 셈. 인터페이스와 컨텐츠에 초점을 맞춰야할 순간에 사용자 스스로, 그리고 사용자의 마우스로 주의를 옮길 뿐 아니라, 사용자가 링크가 뭔지 모르거나 마우스를 사용할 줄 모른다는 느낌을 준다. "클릭" 대신 사용자의 과업(task)과 연결된 동사를 사용하라. "클릭"을 사용하면 사용자는 마우스를 생각하지만, 과업과 연결된 동사를 사용하면 사용.. 2013. 1. 4.
대선 3일전, 주의할 점이 뭐냐는 질문에 대한 유시민의 답변 아래 녹취록은 3차 대선후보 TV 토론 평가와 선거 전망이라는 주제로, 문재인 후보 캠프에서 유시민 전 장관과 함께 대담을 한 방송의 후반부에 나오는 문답입니다. 유시민 전 장관(현 진보정의당 당원이죠)이 분명 장점과 단점을 동시에 가진 분입니다만, 저는 이런 면이 그의 최대 장점이라고 봐요. 사회자 질문: 오늘이 D-3이 남은 시기에 특별히 경계하고 주의할 점이 뭐가 있을런지요? 유시민의 답변:유세장 가면 태도를 결정하지 못한 유권자들도 가끔 있고, 심지어는 박근혜 후보를 지지하는 분들도 지나가다 보시기도 해요. 주로 문재인 후보를 좋아하는 분들이 많이 모이시죠. 누가 될지 모르는 선거인데, 혹시 박근혜 후보가 대통령에 당선될 경우 진심으로 축하하면서 새누리당을 위한 대통령이 아니라 온국민을 위한 대통.. 2012. 12. 17.
두께감이 있는 버튼은 그렇지 않은 버튼보다 더 클릭율이 높나? 어쩌면 바보 같은 질문이라 생각하는 분이 있을 수도 있다. 나도 (좁게는) 웹 디자인 업계에, (넓게는) 인터랙티브 미디어 제작 업계에 10여년 동안 종사하면서 이 점에 대해서는 단 한 번도 의심해 본적이 없으니까. 현실세계, 그러니까 우리가 실제로 물건을 잡고, 누르고, 만지는 세계의 모든 -아니, 최소한 거의 대부분의- 버튼은 그 버튼이 올려진 배경 물체에서 도드라지도록 튀어나와 있다. 지금까지 사람들은 당연히 무언가를 '눌러서' 작동하는 버튼은 그 배경이 되는 물체에서 튀어나온 입체감을 갖도록 디자인해왔다. 손에 실제로 잡히지 않는, 디지털 환경에서 작동하는 인터랙티브 디자인 매체가 등장한 후, 이런 현실세계의 디자인을 모방해서 만들기 시작한 것도 바로 그 이유다. 익숙하니까. 현실세계의 버튼의 모.. 2012. 12. 14.
배리 이진행 님의 부고... 오랜만에 블로그에 글을 남기는데, 하필 부고다.실제로 뵌 적은 없지만, 여러 해 전 수원삼성의 지지자로 사커월드에서 알게 되어 그 분의 리뷰를 흥미롭게 읽다가, 트위터를 하시는걸 우연히 알고 팔로잉하면서 그 분이 남기는 글을 즐겁게 읽었는데. 지금도 믿기지 않고 안타깝다.어제(한국시간) 맹장 수술을 하러 병원에 왔다는 글을 읽은 후 오늘 아침 부고를 접하니 더욱. 고인의 명복을 빕니다. 2012. 10. 16.
웹서비스 기능을 테스트할 때 맥락이 중요한 이유 웹서비스를 만들면서 맨 처음 그 서비스(혹은 사이트)의 컨셉을 정한 뒤, 어떤 기능을 어떻게 구성할 것인지를 정해서 여러 과정을 거쳐 구현한다. 이렇게 구현한 기능이 서비스가 런칭할 때까지 그대로 가는 경우도 있고, 삭제되는 경우도 있고, 혹은 약간의 변형을 통해 런칭하는 경우도 있다. 어떤 경우든 간에 내부 테스트를 통해 그 의미를 증명하는 과정을 거치기 마련이다.(아 물론, 그런 과정 따위는 없는 때도 많다. 일단 만든 기능은 없애지 않는 경우도 많으니까)아무튼, 며칠 전에 내가 다니는 회사에서 새로운 서비스를 하나 런칭했기에, 이 서비스에서 기능 하나를 두고 벌어졌던 이야기를 잠시 해보자. 새로 런칭한 서비스는 링클(LinQle)이라고 하며, 특정한 주제(사람, 사물, 회사, 브랜드, 암튼 뭐든)를.. 2012. 9. 5.
입력항목 중 잘못된 항목이 있을 경우, 그 항목만 보여주자는 의견 스매싱 매거진에 실린 영문 컬럼입니다. http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/본문을 굳이 읽어보지 않아도 되고(저도 정작 본문은 대충 읽어봤고요), 포함된 이미지만 봐도 그 의도가 명백하게 드러납니다. 사용자가 입력해야 할 항목이 아주 많은 화면이 있는 경우, 그 중 한 두개를 잘못 입력하면 피드백을 주죠. 최악은, 알럿창을 띄워서 '틀린 항목이 있으니 다시 입력하삼' 하고 알럿창 닫으면 입력한 데이터를 초기화해버리는 거고. (요즘은 액티브엑스를 설치해야 하는 관공서 웹사이트를 제외하면 이런 경운 드물죠), 그 다음은 입력한 데이터를 날리지는 않지만 뭘 잘못 입력했는지는 안 알려주.. 2012. 7. 2.
로딩 상황을 보여주는 프로그레스바 디자인에 따라 체감속도가 달라진다 재밌는 글을 하나 읽어서 소개. 뭔가를 로딩하는 상황을 보여주는 프로그레스바의 디자인이나 움직임에 따라 실제로 사용자가 느끼는 체감 속도가 달라진다고 한다. 원문은 여기. http://uxmovement.com/buttons/how-to-make-progress-bars-feel-faster-to-user원문에 포함된 동영상을 보면 직접 나레이션으로 설명을 해주는데, 개요는 이렇다. 프로그레스바가 진행하는 방향과 반대로 움직이는 모션을 프로그레스바 안에 포함하면(그러니까 모션이 두 개지), 더 빨리 로딩되는 것처럼 느낀다는 얘기다. 또 아이폰 도입 이후 많이 사용하는 원형 프로그레스바 역시 안에서 돌아가는 모션이 빠를수록 더 빨리 로딩되는 것처럼 느낀다고.사람의 시각은 여러 면에서 조작이 가능한데, 이것.. 2012. 5. 30.
외부 사이트 링크를 새 탭으로 여는게 옳은가? 댓글의 출처: http://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/ 특히 브라우저들이 '탭' 기능을 추가함에 따라, 새로운 브라우저를 열고 닫는 불편함이 없어진 뒤로, 웹페이지 내에 포함된 외부 사이트 링크는 당연히 새로운 탭에 열리도록 하는게 맞다고 생각했는데, 다른 의견을 가진 UX전문가가 있다. 디자이너 혹은 디자인 에이전시의 포트폴리오 사이트를 사용성 관점에서 평가한 포스트에 달린 댓글. 방문자 의견: You should probably use target=”_blank” in your links to external sites so that people who want to view one of .. 2012. 3. 29.