'터치를 위한 디자인하기'를 읽고 #조시클라크 #북어파트 #웹액츄얼리 #UI실무서 #모바일 1. 해당 도서는 단순히 '터치 인터페이스'만을 위한 것은 아니었던 것 같다. 본 도서는 루크로블르스키의 ‘모바일 우선주의’의 연장선 격인 책인데, 조금 더 최신 사례를 다루고 있다. 글 중간중간에 해당 인터페이스 구현(코딩)에 대한 부분이 있었다. 개인적으로는 해당 내용은 건너뛰면서 읽었다. 해당 도서는 UI 기획에 관심이 있는 학생들이나 신입들에게 강력히 추천한다. 2. 인터페이스의 '물리적 특징' 설명 사례에서 1963년 ‘벨’ 직원들이 푸시 버튼을 적용한 전화기 연구에서 보인 다양한 레이아웃이 흥미로웠다. 당시 '벨' 사의 직원들은 새로운 인터페이스를 적용하기 위해 다양한 레이아웃을 테스트하였으며, 오늘날 ..

이 글은 Denys Mishunov가 2016년 11월 SMASHING MAGAZINE에 게재한 글입니다. 피엑스디에서 저자의 서면 허락을 받고 번역, 게재하였으며, 저자의 허락없이 복사하여 사용하는 것은 절대 안됩니다. 원문 링크: "True lies of Optimistic UI" by Denys Mishunov SMASHING MAGAZINE, November 15th, 2016 들어가며 - 세 UI의 이야기 세 UI(User Interface)는 술집에 간다. 첫 UI는 술을 한 잔 주문하고, 그 후로도 몇 번 더 주문한다. 몇 시간 후, 그는 계산을 하고 취해서 술집을 나선다. 또다른 UI는 한 잔을 시키면서 계산을 먼저하고, 이후로도 먼저 계산하고 마시기를 반복하다 취해서 술집을 나간다. 마지..

웹에서 UI를 구성하다보면 별 작은 디테일까지 신경이 쓰일 때가 많다. 브라우저들마다 다 다른 행동을 하는 건 너무 짜증나는 일이지만 어느 정도는 마음을 비운 채로 대하게 되는데, 내가 직접 무언가를 설계하려면 드는 다음과 같은 작은 생각들은, 아 어떤 때는 내가 세상에서 가장 쪼잔한 질문을 하는 사람은 아닌가?하는 생각이 들게 한다. 버튼의 커서 예를 들어, Quiz 1: 웹 브라우저 상에서 버튼 위에 마우스가 올라가면, 커서는 어떻게 바뀌어야 하는가? (이 글은 PC에서 마우스 포인터로 읽어야 제대로 이해가 될 듯) 1) 화살표 모양(arrow)일 것이다. 2) 손 모양(pointer)일 것이다. 3) I자 모양(text or caret)일 것이다. 난 링크! 마우스를 올려보면 정답은 1) 화살표 모..

페이스북이 '좋아요' 단일 버튼에서, 총 6가지 감정으로 바꿨다. 페이스북에서는 이것들을 공식적으로 '공감'(Reactions)이라고 부르는데, 영어로는 emoji, response button이라고도 하고, 한국어로는 이모티콘, 반응 아이콘, 공감 아이콘이라고 하기도 한다. 이 프로젝트는 1년 전쯤 마크 저커버그가 사람들을 불러 모아 지시했다고 한다. '좋아요'버튼이 생기자마자부터 듣기 시작한 사용자들의 요구 사항이었으니 얼마나 오래 참아 왔던가. 물론 사람들이 가장 강력하게 원했던 것은 '싫어요' 버튼이었지만, 그건 들어가지 않았다.http://vip.mk.co.kr/news/view/21/21/2509009.html 프로젝트를 총괄한 사람은 Julie Zhuo라는데, 수백가지 감정 중 단순하게 몇 ..

이 글은 Ben Rowe가 2012년 9월 uxmas.com에 게재한 글입니다. 피엑스디에서 저자의 허락을 받고 번역, 게시하였으며, 저자의 허락 없이 복사하여 사용하는 것은 절대 안 됩니다. 원문 링크: The 4 H’s of Writing Error Messages, Sept. 2012 / 번역 : 정다영, pxd Innovation Group 3, 주임연구원 The 4 H’s of Writing Error Messages 에러메시지 작성의 원칙, 4H 곤란한 일이 발생합니다. 에러 말이죠. 에러는 우리 웹사이트에서 일어나는 일입니다. 현실에서도 볼 수 있고요. 에러는 종종 우리 잘못으로 생깁니다만 시스템 문제일 수도 있습니다. 어쩌면 정말 사용자가 잘못한 것일 수도 있고요. 원인이 뭐든지 간에 에러..

웹 기획자가 알아야 할 서비스 글쓰기의 모든것이라는 책을 읽었습니다. NHN의 테크니컬라이터가 쓴 책입니다.이 책은 개발자나 디자이너가 보는 UI 문서가 아니라, 사용자들이 보는 'UI 텍스트' 에 대한 글쓰기 방법이 기술되어 있습니다. (UI 텍스트: 웹 서비스나 애플리케이션 사용자가 이용하는 버튼, 메뉴, 대화상자, 입력란, 확인란 등과 같은 UI 요소에 적힌 텍스트와 오류 메시지들을 지칭함)pxd같은 에이전시의 경우 별도의 전문 테크니컬라이터가 없기 때문에 평소 UI 기획자가 테크니컬 라이팅에 대해서도 고민을 하게 됩니다. 이런 관련 지식들을 배우고 싶었는데 적당한 시점에 좋은 책이 나왔네요. 새롭게 배운 부분 위주로 발췌한 내용 공유드립니다. 평소에 내가 쓰던 표현중에 무의식적으로 잘못 쓰고있던 ..

1. Refresh(새로고침)를 위한 UI 많은 사람들이 이용하는 트위터나 페이스북과 같은 콘텐츠 앱들은 새로 작성된 글이 이전 글 위로 올라가는 구조를 취하고 있습니다. 그리고 위 아래로 스크롤 하면서 콘텐츠를 보다 보면, 최신 글이나 댓글 등을 확인하기 위해 리스트를 업데이트 해줘야 할 때가 생깁니다. 언뜻 보기엔 사용자가 아무런 액션을 취하지 않아도 최신 정보를 볼 수 있게끔 실시간 업데이트 되는 것이 편하지 않을까라고 생각할 수도 있습니다. 하지만 여기엔 몇 가지 문제와 조건이 따릅니다. 서비스 사업자가 충분한 회선과 서버 자원을 제공하지 못할 경우에는 업데이트가 완료 될때까지 빙글빙글 돌아가는 스피닝 휠과 같은 프로그래스 인디케이터를 사용자에게 지속적으로 노출 시키게 됩니다. 마찬가지로 데이터를..

메뉴에서 2차적으로 나오는 서브 메뉴를 표시할 때, 대충 만들면 생각보다 큰 낭패를 당하게 됩니다. 저희 블로그에서도 이 문제를 여러 차례 지적했었는데요, 공군 가기 힘들어(Global Navigation Bar 디자인)에서, 메뉴 경로를 너무 좁게 만들었다가 망신 당한 공군 웹페이지를 보여 드리고 그 근본 원인을 알려드렸구요, 피츠를 알려주는 퀴즈 (A Quiz Designed to Give You Fitts)에서는 이 문제를 해결하기 위해, 맥과 윈도즈가 어떻게 다르게 접근하였는가를 설명했습니다. 지난 3월 6일 발표되어 많은 인기를 끌고 있는 Ben Kamens님의 아마존 메가 드롭다운 분석(BREAKING DOWN AMAZON'S MEGA DROPDOWN)은 메뉴 UI에서 꼭 알아야할 이 문제를 ..

06-7년 경에 유행했던 공군가는게 제일 힘들어..~!!!!라는 동영상이다. 동영상 제공자의 설명: "06년 입대 지원했을 때 찍었던 동영상입니다.(물론 연출) 그 당시 이 동영상을 올리고 어느 정도 이슈가 되어 얼마 후 공군 홈페이지 메뉴는 개선되었습니다. ^^ " 물론 위의 동영상은 매우 극단적인 경우이겠지만, 누구나 몇 번은 경험하는 일이다. 요즘도 대다수의 웹사이트들이 메뉴(GNB, Global Navigation Bar)를 저렇게 만들기 때문이다. 언듯 보면 2차 메뉴(우리 말로 투뎁쓰 메뉴, 영어로 second level menu)가 너무 협소해서 벌어진 일 같지만, 실은 그것보다 더 근본 문제가 있다. 바로 최상위 메뉴에서 서브 메뉴의 원하는 메뉴(온라인 모병센터)로 가는 길(path) 위에..

글을 시작하며... Apple iOS6로 업데이트되면서, 모바일 앱스토어도 대폭 업데이트 되었습니다. 본 글에서는 iOS6 모바일 앱스토어 업데이트의 장점 및 특징에 대해서 소개하려고 합니다. 'Everything that’s wrong with the App Store in iOS 6' 글에서는 iOS6 앱스토어에서의 문제점을 이야기하고 있습니다. 이 글을 참고하시면, 균형잡힌 시각으로 UI에 대해서 생각해 볼 수 있을것으로 기대합니다. 새롭게 업데이트된 iOS6 모바일 앱스토어의 장점/특징 1. Pad, apple TV화면과 일관성있는 UI 화면 구성 그림1) Pad, TV와 일관성있는 UI 화면 구성 그림2) 홈 화면 변경 iOS6 모바일 앱스토어에 처음 진입하면 등장하는 메인페이지에서 큰 변화를 ..

글을 시작하며 [01] Band (이미지출처 하단 명기) Micro SNS의 등장 이후 특정 그룹을 타겟팅한 SNS가 등장했고, Group형 SNS도 등장했다. 카카오톡(지인간의 채팅), 카카오스토리(지인간의 사진 공유 SNS), 카카오아지트(그룹간의 SNS)의 포지셔닝을 보면 카카오의 전략이 다각도로 이루어졌다는 것을 알 수 있다. (관련 기사 : http://me2.do/FfD7ct2) NHN도 그룹 SNS 성격의 모바일앱 Band를 내놓고 발빠르게 움직이는 모습이다. Band 서비스의 정확한 시작은 알 수 없으나, SNS의 미투밴드에서 그 출발을 미루어 짐작할 수 있다. 미투밴드는 미투데이 사람들끼리 친목을 도모하기 위한 공개(혹은 비공개)형 소모임이다. (미투밴드 : http://me2.do/Gi..

저는 요즘 대부분의 음악을 네이버 뮤직앱을 통해 스트리밍으로 듣고 있습니다. (특별히 좋아서라기 보다는 싸서요) 사용자를 배려하는 디자인 네이버 뮤직 앱은 와이파이가 아닌 3G로 접속시 친절하게 아래와 같은 팝업을 띄워줍니다. 실수로 3G로 음악을 들으면 무선 데이터 이용료가 엄청 많이 나올 수 있기 때문이죠. 그런 심각한 위험을 방지하기 위해 친절하게 3G로 실행시마다 팝업을 띄워서 사용자에게 주의를 줍니다. 데이타 요금 폭탄을 맞아본 사용자에게는 최선은 아니지만 고마운 UI 입니다. 근데 난 무제한요금제 인데? 난 항상 3G로 출퇴근 할때만 듣는데? 나도 배려 받고 싶다 사용자의 불편을 해소해주려는 UI가 매 사용시 마다 나와는 전혀 상관없는 확인 버튼을 누르도록해서 귀찮음과 짜증을 유발합니다. '나..