매핑 도구: Figma, XMind
차를 소유하고 앱을 체험하는 과정에서 정보 목록, 게시물 목록, 입소문 목록, 댓글 목록 등 다양한 유형의 목록 페이지가 응용 프로그램에 존재한다는 사실을 알게 되었습니다. 이 목록 페이지들은 모두 우리에게 같은 느낌을 줍니다: 혼란, 비밀, 모두 글자입니다. 우리가 이러한 인터페이스를 다른 동료에게 보여 줄 때, 얻은 피드백은: 매우 혼란스러워 보이는데, 어디를 봐야 할지 모른다는 것이다. (알버트 아인슈타인, 자기관리명언)
이 문장을 디자인 언어로 번역하면 이러한 인터페이스의 가장 큰 문제는 정보 수준이 혼란스럽고 좋은 시각적 흐름을 형성하지 못한다는 것을 알 수 있다.
그러나 이러한 인터페이스가 사용자에게 미치는 영향은 인터페이스를 찾을 수 없는 첫 번째 시각적 초점이며, 찾아보기 프로세스가 힘들고, 중요한 정보와 콘텐츠를 비효율적으로 얻을 수 있어 이해하기 어렵다.
우리는 기존의 어떤 디자인 세부 사항이 이런 문제를 발생시켰는지 더 깊이 생각해 보고 그에 상응하는 체험 문제를 일으켰다. 또한 해당 최적화 시나리오를 찾습니다.
이상은 주로 시각적 표현의 관점에서 인터페이스의 세부 사항과 그에 따른 최적화 방안을 생각하는 것이다. 예를 들어, 시각적 요소는 크기, 색상, 위치 및 거리로 구성되어 사용자에게 명확한 시각적 정보 구조를 제공합니다.
하지만 그보다 더 중요한 것은 인터페이스의 정보를 요약하고 정보 계층을 명확히 해야 한다는 것입니다. 그렇지 않으면 정보가 정확하게 전달되지 않을 수 있습니다. 다음은 정보 목록을 예로 들어 페이지의 정보 계층을 정리하고 출력 최적화 시나리오를 보여 줍니다.
정보 목록 페이지에서 사용자의 핵심 동작은 "찾아보기" 입니다. 관심 있는 내용을 찾은 후 다음 단계 (자세한 페이지로 이동하여 문장 보기 또는 관련 정보 표시줄로 이동) 를 수행합니다. Dell 의 경험 목표는 사용자가 유용하고 흥미로운 정보를 신속하게 수집하고 이해할 수 있도록 돕는 것입니다.
페이지의 정보는 비교적 간단합니다. 우리는' 필요성' 과' 중요성' 의 두 차원에서 하나씩 분석합니다. 우리는 각 정보의 용도가 무엇인지, 어떤 역할을 하는지, 제거할 수 있는지, 어떤 영향을 미칠 수 있는지, 얼마나 큰 영향을 미칠 수 있는지 등을 생각해 보고 측정하고 판단해야 한다.
위의 모든 분석을 바탕으로 다음과 같은 최적화 아이디어를 얻을 수 있습니다.
효과도에서, 나는 뜨거운 평가의 불과 배경을 결합했다. 배경 상자의 왼쪽 위 구석은 불의 모양일 뿐만 아니라 댓글 수를 가리켜 댓글 수와의 논리적 연계를 강화했다. 하지만 색상은 회색이고 요소 크기가 너무 작아서 전반적인 효과가 좋지 않아 최적화를 조정해야 합니다.
다음 렌더링은 최종 디자인이 아니며 정보 제공만을 목적으로 합니다.
이러한 페이지 정보 계층을 최적화하려는 시도는 이전의 사고방식을 따르고, 먼저 현재 상황을 이해하고, 문제를 찾아내고, 적절한 최적화 방안을 찾는 것이다. 특정 페이지에서는 페이지 위치 지정 및 디자인 목표를 명확하게 하고, 정보 계층을 정리하고, 최적화 지점을 요약하고, 마지막으로 시각 효과 다이어그램을 출력합니다.
이전에는 인터페이스 설계를 최적화할 때 항상' 경험이 좋지 않다' 는 이유로' 인터페이스 개편' 을 해결책으로 삼아 시각 효과 맵을 디자인하기 시작했습니다. 이번 시도는' 좋지 않은 체험' 을 다양한 체험 디테일로 분해하고, 몇 가지 경험과 방법을 총결하여 후속 설계에 적용해 최적화와 개선을 계속하고자 한다.