본문 바로가기

ui10

입력항목 중 잘못된 항목이 있을 경우, 그 항목만 보여주자는 의견 스매싱 매거진에 실린 영문 컬럼입니다. http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/본문을 굳이 읽어보지 않아도 되고(저도 정작 본문은 대충 읽어봤고요), 포함된 이미지만 봐도 그 의도가 명백하게 드러납니다. 사용자가 입력해야 할 항목이 아주 많은 화면이 있는 경우, 그 중 한 두개를 잘못 입력하면 피드백을 주죠. 최악은, 알럿창을 띄워서 '틀린 항목이 있으니 다시 입력하삼' 하고 알럿창 닫으면 입력한 데이터를 초기화해버리는 거고. (요즘은 액티브엑스를 설치해야 하는 관공서 웹사이트를 제외하면 이런 경운 드물죠), 그 다음은 입력한 데이터를 날리지는 않지만 뭘 잘못 입력했는지는 안 알려주.. 2012. 7. 2.
성공적인 '구매 버튼'을 디자인하는 5가지 팁 hongkiat.com에 올라온 5 Tips to Designing a Winning “Buy Button”을 번역한 글. 아주 기초적인 내용인데, 의외로 '버튼'의 기능이나 의미를 생각하지 않고 디자인하는 경우가 종종 있다. 특히 쇼핑몰을 디자인한다면 기본 원칙으로 꼭 염두에 둘만한 내용. 만약 당신이 디자이너거나 온라인 마케터 혹은 어쩌다보니 어떤 시점에 어떤 물건을 팔아야 하는 웹사이트를 소유하게 되었다면, 적합한 '구매 버튼'을 디자인할 필요성이 생긴다. 그러고 나면, '지금 구매' 텍스트를 푸른색 사각형 안에 넣는 것만으로는 기대하는 좋은 결과를 얻지 못한다는 사실을 금방 알아챌 것이다. 다행히도, 적합한 '구매 버튼'을 디자인하는 일은 일단 기본 지식만 알고 나면 그다지 어렵지 않다. 시작해볼.. 2012. 3. 7.
모서리가 둥근 사각형이 각진 사각형보다 좋은 이유 UX Movement 블로그에 실린 글 중 2011년 한 해 가장 많이 읽힌 글, 첫 번째. 간략히 핵심만 간추렸다. 자세히 보고 싶은 분은 이곳을 방문해서 전문을 보기를 권장. 요약본만 보더라도 글을 읽은 후, 원문에 있는 예시 이미지를 보면 이해하기 더 쉽다. 아이폰을 처음 개발할 때 스티브 잡스가 엔지니어의 반대에도 불구하고 아이콘의 모서리를 둥글게 만들어야 한다고 했다는데, 그냥 고집이 아니라 근거가 있다. 출처; http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/ 1. 둥근 모서리는 받아들이기 더 쉽다. 뾰족뾰족한 모서리보다 둥근 모서리가 뇌가 정보를 처리하는데 더 쉽다. 모서리가 날카로울수록 밝게 느껴지고, 밝게.. 2012. 1. 18.
모바일웹 디자인을 할 때 반드시 갖춰야할 5가지 최근 온라인 서비스를 기획하면서 데스크탑 버전을 먼저 시작해서, 지금은 모바일 버전을 구성 중이다. 아이폰을 쓰면서 나름대로 모바일에 익숙해졌다고 생각했는데, 천만에, 모바일 버전을 만들다보니 곳곳에 암초와 함정이 깔렸다. 그 와중에 구독하는 블로그에 등장한 반가운 칼럼. 다시 한 번 되짚어 보는 계기로 삼아보자. 언제나 그렇듯 번역 품질을 장담할 수 없으므로, 원본을 읽으시길 권장. 원본: http://tympanus.net/codrops/2012/01/12/5-things-every-mobile-design-should-have/ 그렇다, 이러한 모바일 웹 유행이 가까운 시일 내에 사라질 것 같지는 않다. 보다 모바일에 친화적인 웹사이트를 만들어야 한다는 생각이 슬슬 들고 있다. 모바일 웹 디자인이 .. 2012. 1. 13.
웹사이트의 우편번호 입력 방식을 개선해보자 예전에 트위터 누군가 올려준 블로그 포스트 하나를 보고 큰 충격을 받았다. '밀피유의 이야기'라는 블로그의 '웹의 사소한 곳도 2011년에 맞도록'이라는 글이다. 혹시 본인의 직업이 웹 기획자, 웹 디자이너 하여간 웹사이트를 기획하거나 운영하거나 만드는 분야에 속하는 분이라면 꼭 한 번 읽어볼 것을 권한다. 이 글에 아래와 같은 대목이 나온다. 그런데 저는 지금도 우편번호 버튼을 누르고 배송지의 동 이름을 입력해 우편번호를 찾고 있는 겁니다. 안 이상합니까? 지금쯤 되면 주말에 출입국관리소를 통해 화성에 갈 수 있지는 않더라도 적어도 우편번호 입력은 주소를 다다닥~ 타이핑하고 있으면 알아서 내가 입력하는 주소를 서버와 주고받아 자동으로 띄워 주고 이메일 입력은 네띠앙이 맨 위에 있는 콤보박스 맨 아래에 .. 2011. 4. 5.
UI, Usability, UX에 대한 쌀로 밥짓는 얘기 이 포스트를 트위터에 올렸더니 'Userbility가 아니라, Usability라는 지적을 해주셨습니다. 무식함이 들통나는 것은 정말 부끄럽지만, 제가 이걸 트위터에 올리지 않았다면 정정할 기회도 얻지 못했겠지요. @R_pooh님을 비롯해서 지적해주신 분들 고맙습니다. 몇 년전부터 부쩍 UX에 대한 얘기가 많다. UX camp라는 대표적인 행사도 있고 UX에 대한 세미나, 컨퍼런스도 많이 열린다. 명함에 UX디자이너라고 적고 다니는 사람도 있고, UX사업부, UX팀 같은 이름을 가진 부서도 있다. 내가 다니던 직장에도 이름에 UX가 들어가는 사업부가 있다. (근데 솔직히 뭐하는 덴지 잘 모르겠다) 많은 이들이 이 세 가지 단어를 사용하면서 -특히 UX를 얘기하면서- 마구 뒤섞어서 얘기한다. 편리하고 쉬운.. 2011. 3. 27.
1박2일 은지원이 보여준 역발상 1박2일의 아침 기상 미션은 승자가 아침밥을 얻고, 패자는 아침밥을 굶는 방식이다. 이를 위해 기상음악이 울리면 전날 촬영에 쌓인 피로로 몰려오는 잠을 깨우며 빨리 일어나서 미션 수행을 해야 한다. 그런데 이번 일요일 방송에서는 제작진이 이를 역으로 뒤집은 미션을 제시했다. 일찍 일어나는 사람이 아침밥을 먹는게 아니라, 늦게 일어나는 사람이 아침밥을 먹는 방식. 생리현상을 참으며 버티는 팀에게 아침을 주겠다는 얘기다. 잠들기 전에는 코미디언팀과 가수팀으로 나눈 두 그룹이 '코미디언의 자존심', '가수의 자존심'을 외치며 절대 먼저 나가지 않겠다고 다짐했다. 그러나 다음날 아침 눈을 뜬 가수팀의 은지원은 전혀 엉뚱한 소리를 한다. 패배를 인정하되, 코미디언팀에게 알리지 않고 조용히 나가겠다는 것이다. 은지.. 2011. 1. 31.
양념통과 UI 기획 세미나 작년에 열린 UX 세미나에서 도널드 노먼 옹이 강연 중에 이런 말을 했다. 외형적으로 복잡해 보이는 장치가 반드시 사용성이 떨어지는 것은 아니고, 반대로 단순해 보이는 장치가 사용성이 쉬운 것도 아니다. 그러면서 한 가지 이미지를 꺼내와 사람들에게 보여줬다. Wyrmworld (위 사진은 물론 노먼 옹이 보여준 것과 같은 것은 아니다) 위 사진처럼 생긴 양념통 사진을 보여주며 참석자들에게 물었다. '두 양념통에는 소금과 후추가 들어 있습니다. 어느 것이 소금을 넣은 걸까요? 왼쪽이 소금이라고 생각하는 사람 손 들어 보세요' 이 질문은 물론 아무 의미가 없다. 왼쪽 것이 소금일수도 있고, 후추일 수도 있다. 겉보기에는 알 수 없다. 뚜껑이라도 달린 거면 뚜껑을 열어 확인하겠지만, 그렇지 않다면 뿌려보기 전.. 2011. 1. 19.
남자의 자격을 보고 부끄러워진 웹기획자 어제 방송한 남자의 자격을 보고 너무도 부끄러웠다. 국내 웹사이트의 잘못된 UI 설계를 너무도 생생하게 까발려주고 있어서이다. 나도 저런 사이트, 저런 화면을 만드는데 일조했구나 싶어 안타까운 마음이 밀려왔다. 아무 생각 없이 입력하도록 한 개인 정보, 너무나 많은 입력 항목, 사용자에게 잘못된 방식으로 피드백을 전달하는 화면. 잘못 설계한 웹페이지의 전형을 보는 듯 했다. 방송에서 이경규, 김태원, 김국진 이 세 분의 OB가 가장 많이 헤맨 지점을 되짚어보자. 1. 아이디를 꼭 받아야 하나? 회원 가입 페이지를 설계하려면 이것부터 물어봐야 한다. 우리 사이트에서 아이디를 꼭 받아야 하나? 어떤 이유로 아이디가 필요한가? 아이디를 받으면 그 정보를 어디에 쓸 건가? 아이디를 안받으면 어떤 문제가 생길까?.. 2010. 11. 1.