독서 경험을 위한 필터 개념 (Reading Experience Filters Concept)

[ 원본 Reading Experience Filters Concept ]
타이포그래피는 우리가 앱을 사용할 때, 좋은 경험을 만들 수 있으며, 반대로 나쁜 경험을 만들 수도 있습니다. 특히 뉴스나 책을 읽는 앱에서는 더욱 중요합니다.
사람들은 종종 독서를 그만 둘 변명을 찾습니다. 그래서 디자이너로서의 우리의 임무는 가능한 한 편안하고 쉬운 독서 경험을 만드는 것입니다.

주요 요인 정의

많은 독서 응용 프로그램들은 글꼴 크기, 서체 및 배경 색을 변경하여 독서 환경을 사용자 정의할 수 있도록 하고 있습니다.
그러나 이러한 설정을 변경하려면 일반적으로 몇 번의 탭이 필요하며 사용자는 특정 유형을 환경 및 조명 조건에 따라 배경 색과 페어링 하는 방법을 알고 있어야 합니다.
또한 사용자를 위해 20가지 이상의 서체를 제공하는 것은 그들의 필요에 맞는 것을 선택하는 방법에 대한 사전 지식 없이 독서 경험을 향상시키는 데 도움이 되지 않습니다.

도전 과제

지난 몇 주 동안, 저는 한 번의 탭과 손가락으로 문지르는 동작으로 독서 경험을 사용자 정의할 수 있는 더 나은 대안을 찾기 위해 도전했습니다.
목표는 사용자가 특정한 서체와 배경 색의 사전 정의된 구문 분석을 만들어 사용자가 일련의 옵션 중에서 선택할 수 있게 하고 필요에 따라 독서 환경을 신속하게 사용자 정의할 수 있도록 하는 것이었습니다.

실행 : 디자인

다양한 사용 사례에 맞는 특정 서체와 배경색 조합을 만들어 디자인 프로세스를 시작했습니다.
이 독서 경험 필터를 사용하는 것은 사람들이 노출이나 대비와 같은 작은 세부 사항을 미세 조정하고 싶지 않을 때 사진에서 필터를 사용하는 것과 같습니다. 단지 설정을 즉시 적용하기를 원합니다.
마찬가지로 사용자가 화이트 밸런스 또는 채도에 대해 알 필요가 없는 사진 편집에서 필터를 사용하는 경우, 독서 환경 필터를 사용하기 위해 타이포그래피에 대해 알 필요가 없습니다.
4가지 조합 / 필터는 다음과 같습니다 :
  • Classic (modern, sans-serif typeface with simple, white background)
  • Traditional (serif typeface with off-white background)
  • Night (sans-serif typeface with dark background)
  • Typewriter (duospaced font with off-white background)
presentation
Classic filter는 밝은 환경에서 캐주얼 한 짧은 또는 중간 정도의 독서 시간에 적합합니다.
Traditional filter는 실내 환경에서 독서 시간을 길게 하는 데 가장 적합하며, off-white background가 눈의 피로를 줄이는 데 도움이 됩니다.
Night filter는 어둠 속에서, 특히 단어만 전체 화면 대신 빛나는 OLED 디스플레이에서 읽기에 가장 적합합니다.
Typewriter filter는 고전적인 타자기(typewriter) 독서 스타일을 좋아하는 분을 위한 필터입니다.
presentation
위에서 언급한 필터 중 어떤 것도 자신의 필요에 맞지 않을 경우 사용자가 원하는 독서 환경을 완벽하게 미세 조정할 수 있는 옵션도 제공하고 싶었습니다.
독서 경험 필터의 이름을 표시하는 알약 버튼(pill button)을 눌러 사용자는 모든 다른 서체를 변경할 수 있으며 글꼴 크기와 배경색을 변경할 수 있습니다.

실행 : 프로토타이핑

프로토타이핑 과정에서 저의 목표는 빠르고 간결하며 반응성이 뛰어나면서 동시에 친숙한 상호작용을 만드는 것이었습니다.
그래서 Instagram Stories나 Snapchat과 같은 소셜 앱의 사진에 필터를 적용하는 것과 비슷한 상호 작용을 선택한 이유입니다.
presentation
https://dribbble.com/shots/4567379-Reading-Experience-Filters-Concept
이 상호 작용 유형을 사용할 때 가장 큰 장점은 사용자가 선택한 설정의 효과를 즉시 확인할 수 있고 새 필터 적용 전/후 상태를 빠르게 비교할 수 있다는 것입니다.
presentation
https://dribbble.com/shots/4511724-InVision-Studio-News-app-dark-mode-concept
야간 독서를 위해 어두운 모드를 전환하기 위한 전용 버튼도 만들었습니다. 이 옵션은 텍스트 및 배경 색만 변경하고 다른 모든 내용은 동일하게 유지합니다.
presentation
https://dribbble.com/shots/4544687-Read-It-Later-Interaction-Concept-InVision-Studio
보너스로, 나중에 보기 위한 글을 저장하기 위해 많은 단계와 탭에 짜증이 나기 때문에 글을 저장하기 위한 단순화된 상호 작용을 실험했습니다.

마치며

이 개념을 사용하면 기기에서 더 쉽게 독서 환경을 맞춤 설정할 수 있으므로 즐겁게 더 많이 읽을 수 있습니다.
이 도전 과제는 매번 마주치는 작은 디자인 문제 인식을 높이는데 큰 동기가 되었습니다. 우리가 그들에게 질문하지 않고 끊임없이 그것을 개선하려고 노력하지 않고 기존의 해결책에 만족해서는 안된다고 믿습니다.

이 글은 번역 글입니다. 원본 링크입니다.



presentation
안녕하세요! Early adopter입니다.
제 번역 블로그를 자주 찾아 주셔서 감사드립니다.
페이스북의 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰", "페이스북" 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!