UIに関するking-zessanのブックマーク (3)

  • やってはいけないUIアニメーション

    ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、

    やってはいけないUIアニメーション
  • 管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla

    商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべて揃ったテンプレート。 30以上のサードパーティのライブラリと統合、多くのコンポーネントを簡単に利用できます。 HTML5とCSS3で記述されており、すべてのモダンブラウザでサポートされています。 Bootstrap 4をベースに、Flexboxでレイアウトされています。 一部のコンポーネントにはより簡単にやり取りするために、JavaScript APIを使用。 MITライセンスで、商用プロジェクトでも無料で利用できます。

    管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla
  • FRONTEND CONFERENCE 2019 に登壇しました - jmblog.jp

    11/3 にグランフロント大阪で開催された FRONTEND CONFERENCE 2019 で「高齢者でも使えるプロダクト UI の挑戦」というタイトルで発表しました。 高齢者でも使えるプロダクト UI の挑戦 / Designing User Interfaces for the Elderly - Speaker Deck 高齢者にも使ってもらえるプロダクトにするために、これまで地道に改善を続けてきたことを事例として共有するという内容でしたが、ありがたいことに、発表後たくさんの質問をいただきました。その場でうまく回答できなかった部分もあったので、あらためてこの場で回答をさせてもらいたいと思います。 「色覚障害の見え方をチェックするためのおすすめのツールは?」 スライドの中でも紹介した NoCoffee という Chrome 機能拡張以外に、Mac アプリでは Sim Daltonis

    FRONTEND CONFERENCE 2019 に登壇しました - jmblog.jp
  • 1