본문 바로가기

전체 글133

절대 어기면 안될 웹디자인 원칙 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.
접근성의 미신: 색깔에 대한 오해 원글은 아래와 같다. 원문 링크: The myths of color contrast accessibility 웹 접근성은 꽤나 중요한 이슈이자, 보다 많은 대중을 대상으로 원활한 사용성을 보장하기 위한 기본 전제 중 하나다. 특히나 정부 기관이나 공공 기관이라면 시각 장애인이나 색을 구별하지 못하는 사람(Color blind, 색맹)에게도 원활한 접근성을 보장할 의무가 있다. 국내에서도 장애인차별금지법이 시행되면서 특히 웹 접근성 테스트에 대한 관심이 높아졌다. 조금 아쉬운 점은 여전히 테스트 결과 나오는 점수를 받아서 접근성 인증 마크를 표시하는 데에만 관심이 더 많다. 한국 기업의 장애인 고용 비율은 처참할 정도로 낮고, 더구나 장애인이 기업에서 의사결정을 하는 직급까지 이른 경우가 극히 드물다는 데.. 2019. 11. 18.
드롭다운의 문제점 드롭다운. Dropdown. 당장 이 블로그의 글쓰기 화면 상단에도 드롭다운이 있다. 글이 등록될 카테고리를 선택하는 역할. 웹페이지가 생긴 이후 아주 오랜 시간 동안 많은 인풋 UI에서 기본형으로 사용하고 있는데, 무슨 문제가 있다는 것일까? 원문링크: https://designsmarts.co/the-problem-with-dropdowns/ The problem with dropdown fields (and what you should use instead) The dropdown is often used in a way that makes user input more difficult. Learn about the advantages and disadvantages of using them. de.. 2019. 11. 15.
토글 토큰이 체크박스보다 나은 이유 체크박스. 뭔가를 선택하는 항목을 나열할 때 사용하는 가장 기본적인 UI 형태이다. 동시에 직관적이기도 한데, 이건 이 UI 요소가 아주 오래되었기 때문. 종이 형태로 된 서류에도 "해당하는 항목에 체크하시오" 같은 지시문과 함께 체크박스를 사용해왔다. 웹 폼이 등장하면서도 체크박스는 다중 선택 UI의 상징처럼 사용됐다. 그러다 모바일 시대가 시작되면서 '이게 최선인가?' 하는 의문과 함께 다른 UI에 대한 고민이 시작. 체크박스의 대안을 얘기하는 글이 있어 소개한다. 원문링크; https://uxmovement.com/forms/why-toggle-tokens-are-a-better-alternative-to-checkboxes/ Why Toggle Tokens Are a Better Alternati.. 2019. 11. 13.
폼(form) 디자인을 잘 하려면? 사용자와 웹서비스 제공자가 가장 적극적으로 만나는 지점 중 가장 대표적인 것이 뭔가를 입력하는 폼(form)이다. 동시에 사용자가 가장 싫어하는 화면이기도 하다. 뭘 신청하려면, 뭘 사려면 반드시 거쳐야만 하는 화면. 동시에 이탈율을 끌어올리는 주범. 폼 디자인 시 주의할 점 46가지를 소개한다. 원문링크: https://www.jotform.com/form-design/ 46 Form Design Best Practices | Form Design Examples Best web form design practices that will drive engagement, increase conversions and help you collect meaningful data. www.jotform.com 1.. 2019. 11. 11.
툴팁의 문제점과 대안 원문링크: https://adamsilver.io/articles/the-problem-with-tooltips-and-what-to-do-instead/ 툴팁은 사용자가 인터페이스의 일부에 마우스를 갖다대면(hover), 기능이나 의미를 설명하는 메시지를 말한다. 대개 사용자가 마우스를 치우면 사라진다. 툴팁은 화면에 부가정보를 넣는 역할을 하지만 몇 가지 문제점이 있다. 1. 눈에 잘 띄지 않는다. 일부 사용자는 툴팁을 알아채지 못한다. 따라서 그 내용을 전혀 보지 못할 가능성이 있다. 2. 추가적으로 신경을 써야 한다. 비밀번호 필드를 충족시키기 위한 복잡한 규칙을 설명하는 추가 정보가 필요하다고 가정하자. 사용자에게 해당 정보를 먼저 표시하는 건 불필요한 부담이 된다. 3. 화면을 가린다. 툴팁은.. 2019. 11. 6.
개발자를 위한 디자인 팁 5가지 디자인 직군이 아니지만 필요에 따라 디자인을 해야할 경우가 있다. 디자인팀이 내가 지금 고치는 세세한 것까지 해줄 시간이 없는 상태에서 아무튼 디자인 업무를 해야 한다면? 원문링크: https://spin.atomicobject.com/2019/08/02/developer-design-decision/ 2019. 11. 4.
싱글 토글 버튼의 어려움 토글 버튼은 두 가지 상반된 기능을 한 버튼으로 담을 때 많이 사용한다. Do/Undo 의미를 담는게 대부분이다. 아래 링크의 글에서 예로 든 팔로우 버튼이 대표적이다. 원문링크 https://uxmovement.com/buttons/the-challenges-with-single-toggle-buttons/ The Challenges with Single Toggle Buttons Toggle buttons should do three things — change states, show the current state, and reveal unselected options. If your toggle button doesn't do all these things, it has poor usability.. 2019. 11. 1.
팝업의 10가지 문제점과 대안 팝업을 좋아하는 사용자는 없다. 어떤 이유 또는 목적으로 표시하든 간에 팝업은 사용자가 하려고 하는 과정을 방해하는 경우가 많은데, 그에 대한 글이 있어 소개. 원문링크: https://www.nngroup.com/articles/popups/ Popups: 10 Problematic Trends and Alternatives Whether modal or not, most overlays appear at the wrong time, interrupt users during critical tasks, use poor language, and contribute to user disorientation. www.nngroup.com 우선 팝업의 종류를 나눈다. 모달은 팝업을 닫기 전까지는 배경이 되는 .. 2019. 10. 29.