[🐰건의🐰] 사용성 관련 제안

[HyeryongChoi]

넘 귀엽고 멋진 토탐정 v1.2 잘 봤습니다~👍
사용자로서 몇가지 건의사항이 있어서 이슈 남겨보아요!

1. 토탐정 위젯

위젯 메뉴 호버 시 어떤 기능인지 알려주는 툴팁이 뜨면 좋을 것 같아요! (자주 사용하지 않는 유저는 볼때마다 "이게 머더라" 할 것 같음..!)

2. 알고있는 알고리즘 관리하기

• 알고리즘 검색창에 더 구체적인 placeholder값이 들어가면 사용자가 이해하기 쉬울 것 같아요
• 연관성이 높은 알고리즘은 가까이 배치되면 좋을 것 같아요(가능하다면)
• 알고리즘목록을 한 줄에 일정 개수만큼 배치하면 좋을 것 같아요(e.g. flex: 1, 근데 알고리즘 길이가 제각각이라 불가능하려나여?!)

3. 티어 가리개 설정

맞추지 않은 문제 난이도 숨기기가 설정된 경우에만 어려운 문제 경고 설정이 가능하니까
난이도 숨기지 않기를 선택한 경우에는 어려운 문제 경고 설정 인풋을 숨겨놓고 토글하는 식으로 바꾸면 덜 헷갈릴 것 같아요!
(숨기지 않기를 클릭한 경우, 어려운 문제 경고 인풋이 비활성화돼서 버그인가?하구 헷갈렸습니다!)

4. 랜덤디펜스 쿼리 설정

이 기능 정말 맘에 들어요~ 👍
쿼리 수정 시 https://solved.ac/search 이 링크를 보고 설정할 수 있도록 알려주거나
자주 사용될 것 같은 쿼리는 화면 하단에 안내하면 더 편하게 사용할 수 있을 것 같아요

5. 알고리즘 분류 잠금 기능

• 알고리즘 분류 잠금방법 설정이 잠금시간 설정 바로 밑으로 들어가는게 더 자연스러울 것 같아여! 잠금시간 설정을 보고 처음에 뭘 잠그는 거지?했거덩요

• 알고리즘 분류를 잠근다음에 보니까 텍스트 스타일이 하이퍼링크처럼 되어있더라구요 그런데 클릭하면 아무일도 일어나지 않는데 요게 맞나여?! 링크가 아니라면 텍스트 디자인을 수정하면 좋을 것 같아요!

[wzrabbit]

안녕하세요, @HyeryongChoi 님! 👋🏻 토탐정을 개발 및 관리하고 있는 요술토끼입니다. 먼저, 여러 방면으로 토탐정에 대한 유용한 건의들을 남겨주셔서 정말 감사합니다.

작성해주신 건의를 바탕으로, 앞으로 개선해 볼 기능들을 공유해 드리고자 합니다.

1️⃣ 위젯의 각 버튼의 의미를 이해하기 쉽게 만들기

• 토탐정을 처음 이용하는 유저 / 익숙하지 않은 유저분들께는 가이드 문서에도 불구하고 메뉴들의 의미를 파악하기 어려울 것이라 생각합니다. 건의해 주신대로 각 메뉴에 사용자가 마우스를 올릴 경우, 아이콘의 좌측에 작은 툴팁이 등장하도록 개선해 보겠습니다.
• 반면 토탐정을 충분히 이용한 유저들은 각 메뉴들의 의미를 충분히 파악하고 있을 것이라 생각합니다. 따라서, 설정에서 위젯 툴팁을 숨길 수 있는 기능 또한 같이 추가하려고 합니다.

2️⃣ "알고 있는 알고리즘 관리하기"의 검색 인풋이 하는 역할을 이해하기 쉽게 만들기

• placeholder를 아래와 같이 수정할 예정입니다.
  • 검색어를 입력해 주세요... $\rightarrow$ 알고리즘 분류를 입력해 주세요...

3️⃣ 사용자가 랜덤 디펜스 쿼리 설정을 더 쉽게 할 수 있도록 만들기

• [직접 입력] 뿐만 아니라 [쿼리 수정] 을 눌러 나오는 모달창에도 솔브드 고급 검색 페이지를 안내하도록 개선해 보겠습니다.

• [간편 입력] 에 문제 언어 를 고를 수 있는 옵션을 추가할 예정입니다.

  • 말씀해주신 [자주 사용될 것 같은 쿼리] 목록을 추가할 경우 어떤 쿼리들을 추가할까를 고민했었는데, 사실 대부분 [간편 입력] 에서 다뤄지는 쿼리인지라, 필수적이지는 않을 수 있다고 판단했습니다.
  • 다만 문제 언어 에 대해서는 설정하는 방법에 대해 문의해 주신 분들이 많았고, 문제 언어 는 랜덤 디펜스를 하는 입장에서 [간편 입력] 에 넣어도 될 정도로 중요도가 높은 설정이라 생각해, 문제 언어에 대해 쿼리를 어떻게 작성하면 되는지를 안내하는 대신 [간편 입력]에 직접 설정할 수 있는 기능을 넣는 방법을 생각해보게 되었습니다.

4️⃣ 백준 페이지 내 잠금 UI 개선

예리한 리뷰 감사합니다 😈

• 말씀하신 대로 알고리즘 분류가 잠겨 있는 상태에서는 하이퍼링크로 유저가 오인하지 않도록 개선해 보겠습니다. text-decoration: none cursor: not-allowed

⏳ 이번에는 보류하게 된 건의들

연관성이 높은 알고리즘은 가까이 배치되면 좋을 것 같아요(가능하다면)

1. 현재는 알고리즘 분류들에 별도의 ID를 붙인 채로 순서대로 렌더링하는 방법을 쓰고 있어, 어려울 것 같으며
2. 이후 데이터 구조를 뜯어고치고, 솔브드의 API를 이용해 알고리즘 분류를 업데이트하는 방법을 자동화했을 때는 솔브드에서 제공하는 순서를 따를 예정

이기 때문에, 아쉽게도 현재로써는 어려울 것 같습니다.

알고리즘목록을 한 줄에 일정 개수만큼 배치하면 좋을 것 같아요(e.g. flex: 1, 근데 알고리즘 길이가 제각각이라 불가능하려나여?!)

네, 아쉽게도 말씀해 주신대로 알고리즘 길이가 너무 제각각이라서 지금은 이대로 유지하는 것이 좋을 것 같다는 생각입니다. 두 극단적인 길이의 알고리즘 분류를 말씀드릴게요.

• z (놀랍게도 문자열 알고리즘의 일종입니다. 오타 아닙니다)
• 커넥션 프로파일을 이용한 다이나믹 프로그래밍 (무려 메뉴 너비의 1/2나 차지합니다)

맞추지 않은 문제 난이도 숨기기가 설정된 경우에만 어려운 문제 경고 설정이 가능하니까
난이도 숨기지 않기를 선택한 경우에는 어려운 문제 경고 설정 인풋을 숨겨놓고 토글하는 식으로 바꾸면 덜 헷갈릴 것 같아요!

이 건의의 경우에는 저는 다른 생각을 가지고 있습니다.

1. 우선, 어려운 문제 경고 옵션 특성상 솔브드에서 그대로 가져온 기능이기에 이 기능을 알고 있는 유저분들은 티어가 공개되어 있을 경우에는 어려운 문제 경고 기능을 이용할 수 없다는 사실을 예측하기 어렵지 않을 것으로 보입니다. 티어가 공개되어 있으면 어려운 문제를 따로 경고하는 것도 별도의 의미가 없기도 합니다. 어려운 문제 경고는 난이도가 이미 감춰져 있어 어려운 문제인지를 구분할 수 없는 유저를 위한 기능입니다.
2. UI를 완전히 가리게 될 경우, 어려운 문제 경고 기능을 사용하러 온 유저가 해당 기능을 찾지 못할 수도 있을 것으로 보이며, UI가 가려진 상태에서의 티어 가리개 메뉴는 빈 공간을 차지하게 되는지라 어색할 수 있다고 생각했습니다.
3. "난이도를 공개하는 옵션" 과 "어려운 문제 경고" 의 UI는 같은 계열의 메뉴에 있고, 거리가 굉장히 가까워요. 그리고 특정 옵션에 따라 다른 옵션들이 비활성화되는 UI는 나름 흔한지라 현재로써는 그대로 둬도 괜찮을 것 같다는 생각이 들었습니다.

다만 이 기능을 모를 유저분들 에 대해서는 이야기가 다를 수 있을 것 같은데, 이 부분은 제가 이 메뉴에 툴팁을 추가하는 방향으로 추후 개선해보도록 하겠습니다.

알고리즘 분류 잠금방법 설정이 잠금시간 설정 바로 밑으로 들어가는게 더 자연스러울 것 같아여! 잠금시간 설정을 보고 처음에 뭘 잠그는 거지?했거덩요

말씀하신 바가 맞아요. 사실 그 외에도 [알고리즘 가리개] 카테고리의 우측 메뉴들이 전반적으로 띄엄띄엄 메뉴가 구성되어 있기도 해요. 아쉽게도 어떻게 메뉴를 구성해야 할지, 바꾼 후에도 어색하지 않게 유지할 수 있을지 등등 제가 고민하고 있는 상태가 커요 😢 그래서 이 건의는 조금 나중에 작업할 수 있을 것 같아요.

저는 여기까지 제 의견을 공유해 볼게요. 혹시 제가 이야기한 의견을 바탕으로 다른 의견이 생기셨거나, 절충안이 떠오르신다면 언제든지 말씀해 주세요 😊
건의 해주셔서 정말 감사합니다