본문 바로가기

전체 글132

Off-White 색상으로 텍스트 필드 사용성 높이기 텍스트 필드 관련된 포스트를 이미 여러 개 등록했는데, 그만큼 이게 중요하다는 얘기다. 특히 전환율을 엄격히 산정하는 회사들은 회원가입 양식이나 결제 양식을 다양한 방법으로 실험한다. 이번에는 Off-White 색상을 적용해서 폼 사용성을 높이는 방법에 대한 글이 있어 소개한다. 원문링크 https://uxmovement.com/forms/improve-your-sign-up-form-with-off-white-text-fields/ Improve Your Sign-Up Form with Off-White Text Fields When designing an app, most designers put all their effort into the content pages but overlook the s.. 2020. 1. 22.
밑줄만 있는 텍스트 필드가 좋지 않은 이유 Html이 처음 등장했을 때는 텍스트 필드는 그냥 텍스트 필드였다. 변형의 여지도 없었고 변형할 생각도 하지 않았지. 그런데 시간이 지나면서 점점 다양한 디자인으로 변해 왔는데, 최근에는 아예 외곽선이 없거나 밑줄만 표시한 텍스트 필드도 종종 보인다. 왜 이런 텍스트 필드 디자인이 좋지 않은가. 그에 대한 글이 있어 소개한다. 원문 https://uxmovement.com/forms/why-you-shouldnt-use-solid-or-underlined-text-fields/ 모든 사람이 위와 같은 텍스트 필드에 어려움을 겪는 건 아니다. 문제는 고연령층과 시력에 문제가 있는 사용자의 경우이다. 위의 예시처럼 특히 필드 레이블까지 placeholder 형태로 들어가버리면 더욱 문제가 심해진다. 텍스트 .. 2020. 1. 10.
사진에서의 다양성이 UX에 영향을 줄까? 흥미로운 포스트가 올라왔다. 사진에서의 다양성이 과연 UX에 영향을 줄까? 여기서 말하는 다양성은 인종, 성별, 연령의 다양성을 말한다. 더 나아가 사진 속의 인물이 종교적 상징을 담은 의복을 입고 있을 수도 있겠지. 원문 링크: https://www.webdesignerdepot.com/2020/01/diversity-in-photos-affect-ux/ Does Diversity in Photos Affect UX? | Webdesigner Depot Can a lack of diversity in photos affect your users? It can! Customers want to see themselves in the faces on your site. Here's how to fix th.. 2020. 1. 2.
앞으로의 UI 디자인 트렌드는? 디자인 트렌드는 변하기 마련이다. 특히 스마트폰 OS의 디자인 트렌드와 맞물려서 변해온 과정을 설명한 글이 있어 소개한다. 원문 링크 https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c 아이폰이 처음 런칭했을 때, 작은 기기를 다양한 터치 제스쳐로 작동시킨다는 개념 자체가 상당히 새로운 것이었다. 이렇게 새로운 인터페이스를 사람들에게 쉽게 소개하기 위해 사용한 개념이 바로 스큐어모피즘이다. 스큐어모피즘은 실제로 우리가 보고 만지는 사물들의 모습을 차용하는 디자인을 말한다. 굳이 아이폰이 아니더라도, 월드 와이드 웹의 초창기 시절 디자인은 모두 기본적으로 이런 개념을 반영하고 있었다. 현실 속의 버튼이 두께를 갖고 표면에서 볼록 튀어나와 있으므.. 2019. 12. 18.
인터랙션을 막을까, 아님 알럿을 띄울까? 인터랙션은 사용자와 서비스 간의 상호작용을 말한다. 사용자가 링크를 클릭하면 타겟 페이지로 이동하는 것도 인터랙션이다. 사용자가 화면 위의 오브젝트를 끌어다 움직이는 것도 인터랙션이다. 만약, 특정한 상황에서 사용자가 어떤 행동을 했는데, 의도한 대로 결과가 나올 수 없는 상황이라면, 애초에 이 행동을 못하도록 막아야 할까? 아니면 행동을 했을 때 원하는 결과가 진행될 수 없음을 알려줘야 할까? 이렇게 말하면 대체 뭔 소린지 이해가 안될테니, 예시를 들어보자. 쇼핑몰이 있다. 여기서 아주 끝내주고 멋지고 아름다운 볼펜을 판다고 치자. 근데 이 볼펜은 판매처가 희귀해서 한국인은 이 쇼핑몰에서만 이 볼펜을 살 수 있다. 그런데 오늘. 마지막 남은 재고를 누군가 사버렸다. 이제 재입고 전까지 이 볼펜의 재고는.. 2019. 12. 4.
아름다움 먼저? 접근성 먼저? 웹 또는 앱을 디자인할 때 미학 측면과 접근성 측면, 어느 것이 더 중요할까? 바보 같은 질문이다. 둘 다 중요하다. 이건 이상적인 답변. 현실에서는? 미학 측면이 더 중요하다. 왜냐고? 당신이 만든 디자인을 컨펌하는 사람은 시각 장애인이 아닐 가능성이 높다. 아 물론 색약 또는 색맹일 가능성 정도는 있지만, 누가 더 다수인가의 관점에서 보면 굳이 따져볼 필요도 없거든. 하지만 굳이 우리가 세금을 받고 일하는 사람이 아니라 하더라도, 우리가 UX-UI 디자이너인 이상 최소한의 접근성은 보장해야할 직업적 의무가 있다. 아무리 민간 기업이 운영하는 서비스라 하더라도. 민간 소유의 건물이라도 휠체어 경사로를 만들고 점자블록을 배치한다. 그러나 종종 극단적으로 접근성을 높이려고 하다보면 미학적인 측면을 훼손하는.. 2019. 11. 26.
웹사이트 디자인 개편 체크리스트 7 웹사이트의 디자인 개편 여부를 판단하는 기준은 무엇일까? 정답은 없는 질문이다. 아무튼 여러 회사와 단체는 웹사이트를 꾸준히 개편한다. 그러니 나 같은 사람이 있는 거지. 드물기는 하지만 정말 90년대 후반에 만든 후에 손을 안댔나 싶은 웹사이트가 간혹 있기는 하다. 내가 놀라워하는 점은 디자인 개편을 안했다는 점이 아니라, 그런 사이트를 계속 유지하고 있다는 점이지만. 웹사이트 디자인 개편 체크리스트에 대한 글이 있어 소개한다. 원문링크: https://www.webfx.com/blog/web-design/website-redesign-checklist/ Website Redesign Checklist + 7 Handy Website Redesign Tips There are a few sure-fir.. 2019. 11. 25.
프로젝트 수행 관련 툴 20선 프로젝트 수행을 위해 다양한 툴과 서비스가 끊이지 않고 나오고 있는데, 이를 바로 바로 받아서 실제로 쓰기는 쉽지 않다. 특히 웹에이전시나 SI의 경우라면 더욱 그렇고. 설령 자체적으로 도입을 결정할 수 있다 하더라도 언어 장벽도 그렇고, 해외에서 개발한 툴을 써보기로 결정하는 게 쉬운 일은 아니다. 그러나 그렇다 하더라도, 아무튼 이렇게 누군가 정리해준 내역이 있으면 그냥 모아놓고 나중에 시간이 날 때 한 번씩 방문만 해봐도 도움은 된다. 아예 모르고 있는 것보다는 낫지. 원문링크: https://www.noupe.com/business-online/tools-for-project-management-and-collaboration.html Want to Make Every New Project a S.. 2019. 11. 23.
절대 어기면 안될 웹디자인 원칙 4 제목 참 거창하다. 내용은 제목만큼은 거창하지 않지만, 분명 기억해두면 좋다. 이런 내용은 기획 초기에 포스트잇 같은 데 간단히 적어서 붙여놓고 자주 흘낏 보며 되새길만 하다. 원문링크: https://webdesignledger.com/4-web-design-principles-you-should-never-ever-violate/ 4 Web Design Principles You Should Never, Ever Violate If you want to design effective websites that convert, you should never violate any of these four principles. webdesignledger.com 원칙 1: 핏츠의 법칙(Fitts' Law) .. 2019. 11. 20.