본문 바로가기

전체 글128

입력항목 중 잘못된 항목이 있을 경우, 그 항목만 보여주자는 의견 스매싱 매거진에 실린 영문 컬럼입니다. 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.
성공적인 '구매 버튼'을 디자인하는 5가지 팁 hongkiat.com에 올라온 5 Tips to Designing a Winning “Buy Button”을 번역한 글. 아주 기초적인 내용인데, 의외로 '버튼'의 기능이나 의미를 생각하지 않고 디자인하는 경우가 종종 있다. 특히 쇼핑몰을 디자인한다면 기본 원칙으로 꼭 염두에 둘만한 내용. 만약 당신이 디자이너거나 온라인 마케터 혹은 어쩌다보니 어떤 시점에 어떤 물건을 팔아야 하는 웹사이트를 소유하게 되었다면, 적합한 '구매 버튼'을 디자인할 필요성이 생긴다. 그러고 나면, '지금 구매' 텍스트를 푸른색 사각형 안에 넣는 것만으로는 기대하는 좋은 결과를 얻지 못한다는 사실을 금방 알아챌 것이다. 다행히도, 적합한 '구매 버튼'을 디자인하는 일은 일단 기본 지식만 알고 나면 그다지 어렵지 않다. 시작해볼.. 2012. 3. 7.
직원을 채용할 때 매번 묻는 질문은? 원문은 'UX디자이너를 채용하는 방법(How to recruit a UX designer)'. 이 글을 쓰기 위해 인터뷰한 전문가들에게 질문한 것들 중 하나인데, 꽤 인상적이라 소개한다. 모든 (채용)후보들에게 하는 질문이 있다면? (What one question do you ask every candidate?) 프로젝트가 심하게 잘못되었을 때를 설명해 주세요. 왜 잘못되었는지, 그로부터 배운 것은 무엇인지? : 후보자가 실패에 대처하는 방법을 이해할 수 있다. 후보자가 겸손한지, 실패를 통해 그의 전문적인 능력을 더 발전시켰는지를 알아볼 수 있다. 이번 달에 인터넷에서 본 가장 멋진 것은 뭔가요? : 후보자가 흥미를 가지고 있다고 말한 것에 실제로 흥미를 가지고 있는지를 알아볼 수 있다. 팀과 프로.. 2012. 2. 20.
모서리가 둥근 사각형이 각진 사각형보다 좋은 이유 UX Movement 블로그에 실린 글 중 2011년 한 해 가장 많이 읽힌 글, 첫 번째. 간략히 핵심만 간추렸다. 자세히 보고 싶은 분은 이곳을 방문해서 전문을 보기를 권장. 요약본만 보더라도 글을 읽은 후, 원문에 있는 예시 이미지를 보면 이해하기 더 쉽다. 아이폰을 처음 개발할 때 스티브 잡스가 엔지니어의 반대에도 불구하고 아이콘의 모서리를 둥글게 만들어야 한다고 했다는데, 그냥 고집이 아니라 근거가 있다. 출처; http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/ 1. 둥근 모서리는 받아들이기 더 쉽다. 뾰족뾰족한 모서리보다 둥근 모서리가 뇌가 정보를 처리하는데 더 쉽다. 모서리가 날카로울수록 밝게 느껴지고, 밝게.. 2012. 1. 18.
모바일 먼저! 스마트폰만 있을 때는 그나마 덜했는데, 아이패드를 비롯한 다양한 기기들이 쏟아져나오면서 웹 디자인 업계에 있는 사람들은 여러 모로 골치가 아프다. 스마트폰은 아예 화면이나 작지, 타블렛은 화면 크기는 큰데, 작동은 터치로 한다. 그러니 모바일 사이트를 만들어서 그대로 적용하기도 어렵고, 그렇다고 전통적인 방식대로 데스크탑 사이트를 만들어놓고 타블렛 기기를 맞이할 수도 없다. 진퇴양난? 물론 답은 있다. 최근에 개편한 트위터를 보면 알 수 있는데, 각 요소들을 큼직 큼직하게 만들고(애플이 권장하는 터치 포인팅 영역의 크기는 44x44픽셀이다. 트위터는 딱 여기에 맞췄다), 롤오버 이벤트를 사용하지 않고 모두 '클릭' 기반으로 만드는 등의 디자인 개편을 통해 타블렛에도 잘 대응하도록 만들었다. 그 외에도 각.. 2012. 1. 18.
모바일웹 디자인을 할 때 반드시 갖춰야할 5가지 최근 온라인 서비스를 기획하면서 데스크탑 버전을 먼저 시작해서, 지금은 모바일 버전을 구성 중이다. 아이폰을 쓰면서 나름대로 모바일에 익숙해졌다고 생각했는데, 천만에, 모바일 버전을 만들다보니 곳곳에 암초와 함정이 깔렸다. 그 와중에 구독하는 블로그에 등장한 반가운 칼럼. 다시 한 번 되짚어 보는 계기로 삼아보자. 언제나 그렇듯 번역 품질을 장담할 수 없으므로, 원본을 읽으시길 권장. 원본: http://tympanus.net/codrops/2012/01/12/5-things-every-mobile-design-should-have/ 그렇다, 이러한 모바일 웹 유행이 가까운 시일 내에 사라질 것 같지는 않다. 보다 모바일에 친화적인 웹사이트를 만들어야 한다는 생각이 슬슬 들고 있다. 모바일 웹 디자인이 .. 2012. 1. 13.
브레인스토밍의 장애물 뛰어넘기 브레인스토밍의 단점을 지적하는 사람도 많습니다만(가장 대표적인 경우가 '집단사고'로 들어가버리는 거죠. 한 명의 의견에 매몰되거나, 획일화되는 것을 말합니다), 여전히 브레인스토밍을 장려하는 사람들이 많고 또 장려할만 합니다. 특히 IDEO 같은 회사에서는 브레인스토밍을 아주 중요시하고, 강조한다더군요. (이 회사에서 출판한 책도 있습니다) 구독하는 블로그에 브레인스토밍에 대한 글이 올라와서 간략히 정리해봅니다. 전체 원문은 이곳에서 읽을 수 있습니다. 브레인스토밍의 장애물 뛰어넘기(Jumping the hurdles of Brainstorming) 작성자 Patrick Cox 해결해야 할 문제를 반복해서 적으라: 브레인스토밍을 시작하기 전, 시작한 이후 문제를 반복해서 종이에 적으라. 브레인스토밍을 진.. 2012. 1. 6.