web-dev-qa-db-ja.com

テキストなしですばやく識別できる色付きタグ

私は、運動の名前の多数のリストを含むモバイルアプリを設計しています。各エクササイズは、一次筋肉タイプまたは多くの筋肉タイプ(上腕二頭筋、上腕三頭筋、肩、腰など)のいずれかに分類できます。今日、このエクササイズリストには、各エクササイズのタグとして「筋肉タイプ」が含まれています。ただし、エクササイズに多くの筋肉の種類がある場合、複数の行を折り返すか、切り捨てます。どちらも優れた解決策ではありません。

私が現在提案している解決策と仮説は、テキストによるタグ付けを排除し、リストの項目をクリックすると完全なビューに展開できる省略されたタグで一意に色分けされた円で置き換えることです。ただし、略語があっても、16種類の筋肉を色分けするという恣意的な性質は覚えすぎて処理するには多すぎる可能性があるため、私はためらっています。

タグ付けとカテゴリー化ビューのこのトピックに関する洞察を気に入っていただければ幸いです。

3
occur

カラーコーディングに使用できる最大色は、7〜9の間です。最大の効率と学習可能性のために、3〜5色のみを使用する必要があります。また、人口の約4%が色覚異常であることを考慮する必要があります。

別の方法は、タグとしてアイコンを使用することです。各アイコンは特定の筋肉を表しています。表現された筋肉にできるだけ似た単純な形状を使用します。体の一部を表す灰色と筋肉を表す赤の2色のみを使用します。

2
DesignerAnalyst

情報密度を最大化

タグは分類に最適ですが、すばやくスキャンするのは困難です。ユーザーが特定の筋肉または領域を彫刻するためのエクササイズをすばやく見つけられるようにすることが目標である場合は、視覚的なアプローチを試してください。

UIにフィットするのに十分小さいが、ユーザーが筋肉グループを区別できるほど大きい体の標準化されたマップを作成します。各演習では、対象となる分野を強調表示します。このパターンは、フィルタリングコントロールとしても機能します。

Map of the body's muscle structure
これとまったく同じではありませんが、アイデアはわかります。

6
plainclothes

目標で分類

知識が限られていて、すぐに始めてメリットを確認したいユーザーは、Goalを念頭に置いて開始する場合があります。彼らの目標は、「おなかの周りのゆるい脂肪」または「6パックを速く入手する方法」かもしれません

したがって、この分類を、初心者が把握して関連付けることができるモデルに抽象化できれば、最も役立ちます。

したがって、私はあなたのユーザーベースを知ることを勧めます。これとは別に、モチベーションがフィットネスアプリの継続的な使用をどのように促進するかについての調査も行います。これにより、ユーザーインターフェイスの設計が適切に行われます。

2
Vjay

筋肉タイプのリストを表示する目的は何ですか?ユーザーは、対象とするタイプに基づいて演習を選択する可能性がありますか?つまり、タグはフィルターと組み合わせて使用​​されますか?おそらく、ユーザーが「上腕二頭筋に取り組みたいのですが、どのエクササイズを選択すればよいですか?」と言ってきます。

特定の運動の対象となるグループの領域が塗りつぶされた、すべての筋肉グループの「マップ」はどうですか。私は小さな立っている人間のシルエットを考えています。対照的な色の領域は、運動が対象とするタイプを示しています。

0
TScott

このような深い筋肉の分類がユーザーにとって適切に機能することを確認してください。彼らは本当に教育を受けており、そのような詳細は彼らにとって意味がありますか?ほとんどのフィットネスアプリは、ABS、コア、上半身など、より一般的な筋肉の分類を使用しています。

フィールドでの知識があまりないため、各エクササイズには主要なターゲット(筋肉またはこれらのカップル)があり、他の筋肉にも影響を与える可能性があることをお勧めします。それがあなたがとても多くのエクササイズをしている理由です。

私の提案は、影響を受ける筋肉の限られた数だけでなく、すべての主要なターゲットを表示することです。次に、マウスオーバー操作のすべてのタグを開示します。

enter image description here

このようなアプローチは、商品パッケージの成分リストに適しています。確かに、彼らは最初に主要な成分を指摘するべきであるので、ほとんどの場合、あなたはすべてのリストを読む必要はありません(リストの最初にパーム油を見て、製品を棚に戻します):
enter image description here

0