ブックマーク / uxmilk.jp (6)

  • モバイルデザインで押さえておきたい6つの基礎テクニック

    最近のインタラクションデザインの成功例を調べてみると、どれも基礎をしっかりとおさえたものとなっています。これらのデザインには共通して、人間の自然な行動をもとにし、私たちが気づかないところで障壁となるものを取り除いています。ビジュアルの表現やインタラクティブな体験が重視されており、中でも読みやすさ、理解しやすさは特に重視されます。 それでは、最も重要なデザインテクニック、およびそれがどのように機能するかについて簡単に見てみましょう。 効果的なタイポグラフィ サイトまたはアプリにおけるテキストの目的は、アプリとユーザーの間に明確なつながりを確立し、ユーザーが目標を達成できるようにすることです。そして、タイポグラフィはこのインタラクションにおいて重要な役割を果たしています。 テキストのサイズとレイアウトは、画面上でものを読むときの体験に大きな影響を与えます。小さな書体や狭い行間、余白の文字を処理

    モバイルデザインで押さえておきたい6つの基礎テクニック
    itouhiro
    itouhiro 2016/11/16
  • UXを向上させる5種類のアニメーションの使い方 | UX MILK

    Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens

    UXを向上させる5種類のアニメーションの使い方 | UX MILK
    itouhiro
    itouhiro 2016/11/15
    「待ち時間を退屈にしない読み込み中にレイアウトだけ見せるスケルトンスクリーン。状態がいきなり変化せずアニメーションで漸進的変化。機能アイコンが変わることでつながり示す。成功したらアニメーションで示す」
  • リモートワークにありがちな5つの落とし穴

    Kalbach氏は、コラボレーティブ・ブレインストーミング・プラットフォームであるMuralのカスタマーサクセス部門長です。以前は、中でもAudi、SONY、Elsevier Science、Lexis Nexis、Citrix、eBayなどの大企業と共に、UXの部門で働いていました。 リモート(遠隔)での共同作業は難しいものです。リモートワークに携わるほとんどの人が、なんらかの理由で困難を感じています。 チームが物理的に分散されたとき、クリエイティブな仕事は特に不利な状況に置かれます。私たちの仕事はビジュアル的な側面が大きく、グループでの作業も多く発生します。多くのデザイナーにとって、クリエイティブワークをリモートで進めることなど想像できないはずです。 しかしリサーチによると、実際にはリモートでのデザイン作業はよくあることだということがわかりました。調査をしたデザイナー275人のうちの3

    リモートワークにありがちな5つの落とし穴
    itouhiro
    itouhiro 2016/09/21
  • 多くのサイドバーが役に立っていない理由とは?

    YonaはCodal社のテクニカルライターです。彼はコンテンツ戦略、文章、ブログ、編集の責任者です。また多岐にわたる記事を提供するため、Codal社のUX、発展、マーケティングそして管理チームと密接に働いています。 Webサイトにおいて、サイドバーは必要でしょうか? 情報交換をとても重要視している業界ですから、サイドバーが流行してスタンダードな手法となったのはある意味必然といえば必然です。ですが、サイドバーはつまるところただのリンク集でしか無く、補足的な情報を入れておく程度の場所です。 これを言い切ることで私を嫌いにならないで欲しいのですが、UXデザイナーはサイドバーに頼りすぎなのです。 例えばUXデザイナーの方にサイドバーを使わなければいけない理由を聞いてみてください。おそらく合理的な答えを導き出すまで相当な時間がかかるのではないでしょうか。 では、サイドバーに対抗できるものはあるのでし

    多くのサイドバーが役に立っていない理由とは?
    itouhiro
    itouhiro 2016/09/07
    「ニュースサイトのサイドバーはやりすぎ。サイドバーを取り除いても直帰率、コンバージョン率に悪影響はない。ミニマリズムでユーザーに大切な部分に集中させよう。唯一の例外はブログ。」
  • マテリアルデザインに見る機能的なアニメーションの6つの法則

    機能的なアニメーションとは、演出のみのアニメーションと違い、その意図が明確かつ論理的に校正された、控えめなアニメーションのことです。それはUIにおける認知的負荷を軽減させ、変化の見落としを防ぎ、そしてよりその空間の記憶を呼び起こしやすくさせ、何よりもUIに命を吹き込みます。 その動きは、増えたり、分かれたり、その形やサイズが変わることで、画面をさらに生き生きと見せることができます。機能的なアニメーションは、ナビゲーション上でユーザーをスムーズに移動させ、スクリーン上の要素の配置の変化を説明し、要素の階層を明確にするために使用するものです。 成功する機能的なアニメーションには、以下の6つの特徴があります。 1. レスポンスがよい UIデザインにおいてビジュアル・フィードバックはとても重要です。なぜなら、ユーザーの認知に対するごく自然な要求に訴えかけるからです。現実世界ではボタンやコントロール

    マテリアルデザインに見る機能的なアニメーションの6つの法則
    itouhiro
    itouhiro 2016/08/25
  • その文字、薄すぎない? デザインにおける灰色の明度は何%が最適か

    UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導

    その文字、薄すぎない? デザインにおける灰色の明度は何%が最適か
    itouhiro
    itouhiro 2016/07/26
    MacとWindows比べるとMacのほうが太くて濃く見えるとかあるね
  • 1