web-dev-qa-db-ja.com

ワイヤーフレームでのテキストオーバーフローの処理

これは、私がどのようにアプローチするかについて多くのことを悩ませてきたものです。

私の目標はきれいなワイヤーフレームを用意することではなく、機能的なワイヤーフレームを用意することなので、ワイヤーフレームで「醜いデータ」を使うのが好きです。単純な1行の単語を使用するのは簡単で見栄えがよいですが、現実的ではありません。

アイテムを選択する前に、プレビューで長いテキストを処理する方法をいくつか考えます。 A list of ways to handle long text in previews では、Unicodeを悪用してこれらのフィールドをオーバーフローさせる悪意のあるユーザーがいる場合はどうでしょうか。 Various ways of exploiting unicode

最初の例は、ユーザーがまたはを使用して新しい行を作成しているため、単純な文字カウントが不正確になります。

2番目の例は、長いUnicode文字を使用して文字カウント方法を乱用するユーザーです。

3番目の例は、空白のレンダリング文字を使用して、一見何もないところから楕円を作成しています。

どういうわけか、テキストの幅を測定するだけでなく、垂直方向に流れないようにする必要もあります。または、最初にこれが起こらないように入力をサニタイズします。しかし、これらの予防策は常に技術的に実現可能であるとは限りません。

さらに、とにかくどこかに完全なテキストを表示する必要があり、長いユニコード文字でばかげてきます。例として、longer title that ends in an Ellipsisは37文字です。以下は20文字の文字列の例です。改行を使用した場合、そのフォントサイズで画面を完全にオーバーフローするのに17文字しかかかりません。

Too long of strings

これらすべてを考慮して、これをどのように処理しますか?特定の高さの後にテキストをスクロールオーバーフローしますか?改行で構成されている場合はどうなりますか?フォントサイズを小さくしますか?

ユーザーがそのような長いテキストを入力するのはばかげているので、それは問題ではないと言われました。この応答は実際に発生するため、私はこれが好きではありません。これらのEdgeケースを表示する最良の方法を見つけることが私の仕事であるはずです。

2
nine

ワイヤーフレームを使用してさまざまなシナリオを効果的に探索し、Edgeケースをテストしたことを称賛しますが、この問題をサイロで解決しようとしているのはユーザーのポイントを支持するUXデザイナーの仕事であるため、私は考えていません。より大きな製品チームの一部として、さまざまな要件と設計上の考慮事項を表示します。

質問に答えるために、ユーザーがテキスト行に快適に表示できるよりも多くのテキストを入力したい理由のさまざまな動機を理解できれば、この問題を解決するための最善の行動方針がより明確になることが期待されます。

説明するユーザーの2つの主要なグループは、A)意図せずにオーバーフローを作成するユーザーと、B)意図的にオーバーフローを作成するユーザーのように見え、両方のグループに等しく適用されるいくつかの戦略があります。

  1. 物理的な文字制限を作成し、UI検証を通じてそれを強制する
  2. オーバーフローを防ぐためのユーザーインターフェイスの再設計(例:切り捨て)
  3. インタラクションを再設計してオーバーフローテキストを表示する(ホバーオーバーを使用するなど)

しかし、設計戦略の正確な組み合わせは他の要因に依存する可能性があります。そのため、ユーザーとチーム内での使用のコンテキストをよりよく理解すると、適切なアプローチに導くことができます。

1
Michael Lai