2024.01.18.학습일지

 있다 없는 문의 폼 제목

 

 가상 커머스 상세 문의페이지 와이어프레임 제작 중 가장 고민이 많이 되는 지점은 내가 한번도 생각해보지 못한 '폼 제목'단에 있었다. 문의페이지의 리스트 바리에이션은 커머스별로 두 가지 존재했다. 첫번째로 폼 제목만 상단에 띄운 페이지에서 클릭 시 상세 문의 본문이 들어나는 케이스이고 2번째는 문의폼 제목이 없고 문의 본문만 존재하여 클릭이 아닌 토글로 움직이는 케이스이다. 원래는 토글형 노뎁스로 해야겠다는 생각만 하고 있었는데, 갑자기 다른 변수가 등장한 것이다.

 

 만일 제목과 문의 본문이 모두 있는 토글을 만들게 된다면, 본문 썸네일을 접었다 필 수 있게 하는 토글 요소를 또 만들어야 한다. 이는 사용자로 하여금 UI를 복잡하게 보이게 하는 부정적인 요소가 될 것이다. 그래서 나는 2개의 케이스 중 어느 곳에도 없는 제목이 있는 1개의 토글형으로 선택하여 작업하기로 결정하였다.사실 와이어프레임 내에는 반영이 되어있지 않지만, 학습일지를 적으며 아티클을 찾아보고 개인적으로 지금 내린 결론이다. 위의 결정을 하게 된 이유는 다음과 같다.

1. 사용자는 글을 스캔한다.
: 세계적으로 유명한 유저 리서치 회사, 닐슨 노먼 그룹의 9가지 스캔 패턴에 따르면 레이어 케이크 패턴, 커밋 패턴에서 제목을 읽는 경향이 나타났다. 또한 모든 유저들은 글을 제대로 읽지 않고 스캔하는 패턴을 보이게 된다. 이로써 스캔하는 유저들을 읽게하기 위해서는 정제된 제목이 중요하다는 것을 알게 되었다.

2. 가독성을 높이기 위해선 두괄식으로
: 또한 닐슨노먼그룹은 9가지 텍스트 설계 팁에서 가장 중요한 정보는 바로 앞에 두는 것을 권장하고 있다. 따라서 위 1번과 동일한 맥락으로 정제된 제목을 앞에 배치하는 것의 중요성을 강조하고 있다.

 

아티클 출처: 

온라인 텍스트는 읽지 않는다. 스캔한다.

결론

 따라서 오늘의 결론은 글을 스캔하는 유저들에게 최대한 빠르게 정보를 찾아주기 위해선 사용자로 하여금 키워드만 적게 넛지되는 '제목'의 특성을 중요시해야 한다는 것을 깨달았고 이를 와이어프레임이 완료된 후에 알았다는 것이다. 그래서 새로 생각해낸 레이아웃은 내가 찾은 레퍼런스의 어디에도 없는 패턴이 되어버렸다. 바로 제목만 있는 토글이다. 사실 어디서 본거 같은데, 기억이 나지 않는다. 

 

 위에서 두 개의 토글을 사용하면 사용자에게 UI를 복잡하게 보이게 만드는 요소가 된다고 하였다. 그래서 토글은 제목 아래에 하나만 달고 펼치면 상세와 판매자 답변이 보이는 방식이다. 정확히는 커밋패턴을 차용하였다. 커밋패턴은 관심 있는 주제가 나오면 아래에 있는 모든 행을 모두 읽는 유형을 말하는데, 나는 사용자가 관심 있어하는 제목을 발견하여 토글을 내리면 그때 관련정보가 모두 노출되면 원활한 유저 경험이 될 것이라는 가설을 세운 것이다.

좌측: 오늘의 생각이 반영되지 않은 문의 와이어프레임 우측: 상세정보 와이어프레임

클론디자인, toss

 오늘 2차 과제에 추가된 와이어프레임에 대해 튜터님께 피드백을 받는 과정에서 와이어프레임에 컬러를 입히는 것보다 클론디자인을 시작하는 것이 좋을 것이라는 조언을 얻었다. 사실 부족한 실력을 보완하기 위해 추가적인 컬러작업보다 레퍼런스 모작을 하고 싶었던 터라 너무 반가운 이야기였다. 그래서 바로 클론 디자인 4가지 과제 중 'toss 홈 화면'을 선택하고, 디자인을 시작하였다. 

 

 디자인을 하기 전 모든 아이콘, 모노그램, 콘텐츠를 규격에 맞게 컴포넌트화하는 과정을 거쳤다. 이번 과제에 아이콘 디자인은 포함되지 않은 상황이었고, 나 또한 아이콘 디자인을 할 시간은 없었기 때문에 이번 과제의 아이콘, 모노그램은 이미지를 컴포넌트화시켜 넣는 방향을 선택했다. 아래 이미지는 toss 홈의 모든 아이콘, 모노그램을 컴포넌트화한 결과물이다. 내일은 이를 바탕으로 클론 디자인을 진행할 것이다. 

토스 컴포넌트화