直感的なUIとは予想した通りの結果が得られるもののこと - ネコメシCEOブログ
UIデザインの参考に！斬新で美しいUIをもったiPhoneアプリまとめ という記事では、紹介しているアプリのことごとくに、「ボタンが無くてシンプル」「直感的で使いやすい」などと書いてあるが、ClearのUIみたいなのを「誰でも直感的に操作できる」などと評価する理由がさっぱり理解できない。 こういうUIは基本的にどれも玄人向けで、操作がジェスチャの塊になってしまっているものは、それが使いこなせる俺カッケー感が高くて自己顕示欲を満たしやすい。"そのように操作できるUIデザイン"が気持ちいいのではなく、"そのように操作している自分"が気持ちいいの間違いなんじゃないだろうか。 ボタンが一切なくてシンプルだと気持ちがいいUIになるだって？ そんなわけがあるはずない。現実世界はボタンが一切なくてシンプルなUIで溢れているし、そのおかげで毎日いろんな場面でいらいらさせられている。たかが1個のレバーを上げ
定番パターンだけじゃない！サービスに最適化されたUser Onboarding
アプリにおけるUser Onboardingでは、ウォークスルーとチュートリアルを用意することが、最早定番になりました。 まずはウォークスルーでユーザーに「価値訴求」を行い、次にチュートリアルで「使い方」を体験してもらうことで、アプリへの導入をよりスムーズにすることが可能です。 User Onboardingの定番パターンウォークスルーの定番といえば、3〜5枚の画像を使ってサービスの価値をスライド形式で紹介するパターンです。 サービス価値の重要ポイントを分かりやすく伝えられる、とても良いUIだと思います。 （左）Dropbox Paper、（右）Inbox一方、チュートリアルの定番といえば「コーチマーク」です。 実際の画面にオーバーレイさせて、ユーザーに一番使って欲しいUIの解説ができるので、こちらも先ほどのウォークスルー同様、とても良いUIだと思います。 （左）トクバイ、（右）Pinko
アプリ企画者必見！ユーザ離脱を防ぐチュートリアル制作に役立つアプリ20選 | Patto - スマホアプリ制作・開発・CMSならiPhoneもAndroidも対応のPatto
スマホアプリをインストールすると初回起動時にアプリの簡単な概要や機能説明、使い方説明などが表示されることがあります。 よく「チュートリアル」と呼んだりしますが、正確には左右に画面をスライドして表示する手法のことを「ウォークスルー」と言います。 1回しか出ないのでなかなか強く記憶には残らないかもしれないですが、アプリのファーストインプレッションに大きく影響するので、伝える内容はもちろんですが、それが与える視覚的、感覚的印象も同じくらい重要となります。 「ユーザにアプリの使い方を学習させるためのUI」にはいくつか種類があって、他にも「コーチマーク」など通常画面上にオーバレイしてボタンや操作を順にポップアップなどを使って説明していく手法などもあるのですが、今回はウォークスルーを採用しているアプリの方が最近は多いと感じるのでそちらのタイプをメインに紹介していきます。 ※ウォークスルーがあまり一般的
アプリの導入画面「ウォークスルー」のデザインで気をつけたい５つのこと
UX Movementの著者であり、編集長です。明確で効率的なデザインに美しさを見出し、ユーザーのために闘うことが好きです。 新作アプリにとって、ウォークスルーはいわば「取扱説明書」のようなものです。 ウォークスルーは、新しいユーザーがアプリを起動したときにまず表示される、アプリの機能についての簡単なガイダンスのようなものです。新しいユーザーが戸惑うことなくアプリを使うために活用されます。 アプリからウォークスルーを無くしてしまうと、ユーザーを混乱させてしまう可能性があります。逆にあったとしても、読みにくくわかりづらいものであれば結果は同じです。ユーザーはウォークスルーを面倒に感じ、読み飛ばしてしまうでしょう。 ウォークスルーは、ユーザーにアプリの使用方法を理解してもらうため、読んでもらえるようなものであるべきです。そのためには、明確なナビゲーションにし、読みやすいテキストにしましょう。ま
UIデザイナー必見！ アプリの導入画面で使われる主な４つの手法
ユーザーがそのアプリの中で一番最初にふれる画面は、アイコンと同じくアプリの「第一印象」になると考えても間違いないくらい、大切な部分です。 だからこそ導入画面は、ユーザーの気持ちになって、ユーザーのことを考え、しっかりと設計しなければなりません。 今回はそんなアプリの導入画面によく使われる、４つの手法をご紹介します。 スプラッシュ まずはおそらく最も多くのアプリが採用しているスプラッシュという手法です。 ホームからアプリのアイコンをタップしたときに出る画面で、データローディングの時間稼ぎ、またはそのアプリをブランドとしてユーザーに認知させる目的で使われます。 たとえばツイッター公式クライアント。 アプリを起動したときの、この画面ですね。 みなさんご存知かと思いますが、ツイッターは少し特殊なスプラッシュで、 こんな風にどんどん鳥がせまってきて背景にコンテンツがあるという、面白いスプラッシュを導
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
スマホヘッダーデザインのトレンドと気をつけるべき5つのポイント | in-Pocket インポケット
こんにちは。デザイナーの武本です。 スマホサイトのヘッダーをデザインする時に気をつけているポイントをまとめてみました。 1. ヘッダーの縦幅 - だいたい44〜50pxが標準 ヘッダーには多くの場合、リンクが配置されます。その為、タップ可能な最小領域とされる「縦幅36px」は必ず取りましょう。有名サイトを幾つか見てみると、だいたい44〜50pxくらいが標準となるようです。 私は、48px or 大きめなら60pxにする事が多いです。60pxを超えるとちょっと邪魔に感じるかもしれません。ですが、ヘッダーの色をページ背景色と同じにする・あるいは透明にするなどすれば、70~80pxのヘッダーでも邪魔に感じなくなる事もあります。 2. 情報を入れすぎない - 2、3要素に絞る モバイル端末では、ヘッダー領域はかなり限られてしまいます。多くの要素をヘッダーに詰め込む事は、見た目によくないだけでなく、
【怒りのUI】iOSとAndroidの標準UIを比較してみた｜アクトゼロ｜SMMやSEMを中心としたデジタルマーケティング会社
こんにちは、デザイナーのスライです。 日サロ行ってるの？とよく聞かれます。 夏ですね。。。 さて、怒りのUIでは過去にiOSとAndroidに使用されている デザインガイドラインについて記事を書きました。 【怒りのUI】iOSヒューマンインターフェイスガイドラインから学ぶUI設計 【怒りのUI】Googleのマテリアルデザインから学ぶUI設計 今回はそれらを踏まえて、標準UIはそれぞれどう違うか、設定画面を主にまとめてみました。 怒りのUI第5回目「iOSとAndroidの標準UIを比較してみた」です。 （※検証環境：iOS 9.3.2、Android 5.1.1） トグルスイッチ トグルスイッチは、機能のオン・オフを設定する際に利用されます。 iOS、Androidのどちらも殆ど同じデザインです。 実生活で利用する照明などのスイッチと同じで、 右側がオン、左側がオフになっています。 どち
正しく使えてる？ チェックボックスとスイッチの使い分け
下の図のフォークを見て、それがサラダ用なのか、メイン用なのか見分けるのは簡単ではありません。形状も用途も同じものだからです。両方とも食べ物を突き刺すための、尖った部分をもつ道具ですが、それぞれコースの異なる料理用にデザインされています。 用途は同じでも異なる目的に設計されている Webデザインの世界でも、スイッチとチェックボックスを扱う際に、フォークと同様の混乱が起こります。どちらを使用するべきか、あまり大きく考えていないデザイナーの方が多いですが、適当に使用すると、ユーザーを混乱させてしまいます。フォークの例のように、異なるコンテキスト（文脈）に対して、UIを使い分ける必要があります。 スイッチとチェックボックスは、ともに設定を適用する際に使われますが、ユーザーが期待する適用のタイミングがそれぞれ違います。 正しい条件下においてUIを使い分けることにより、直感的にどうするべきか見分けられ
状態か機能かわからないトグルボタンの改善 - Qiita
概要 こういう切替スイッチ、苦手なんですよ‥‥。できれば左のほうに統一してほしい pic.twitter.com/dBlWhVj4Cv — LV41 (@lV41_) 2017年5月26日 ちょうど2ヶ月ぐらい前に同じことを思い、改善策を考えていたので、現実的で筋が良さそうな2つの案を紹介します。 改善策1 : 機能を表すラベルとその状態を表すトグルボタンのセットにする ボタンという機能をもちつつも、その表面に状態を表現することが混乱させてしまう原因なので、機能と状態に分離し、各々を明確に表現することで改善します。 改善策2: ツールチップを用いてそのボタンのアクションを明記する 状態は画面を見てわかっていたりするので、本当にユーザーさんが欲しい情報はそのボタンの機能だと考えると、状態は置いといて、マウスホバー時などにツールチップを用いてアクションを明記することで改善します。ホバー状態があ
UXの最適化には欠かせない！チェックボックスとトグルスイッチの役割と使い方のコツ
フォームの作成において、デザイナーはいくつものデザイン候補から最適なものを選ぶ必要に迫られます。ユーザーにとって自然なものを選ぶのが定石ですが、あまり認識されていない注意点もあります。今回は特にチェックボックスとトグルに注目し、最適なデザインの作り方を見ていきましょう。 まずは基本的な機能と役割をおさらいしましょう。チェックボックスはユーザーに任意の数だけ選択をしてもらう場合に使います。ゼロ、1個、2個以上など選択する個数はどれでも構いません。チェックボックスは他のものと混ざらないようにし、1つをチェックしても他のボックスの選択が外れないようにします。 トグルスイッチは実際のスイッチを模した形で、ユーザーにオンもしくはオフを切り替えてもらいます。 チェックボックスとトグルスイッチの使い方 1.基本の見た目は変えない（チェックボックス・トグルスイッチ） チェックボックスは小さな正方形で、選択
タベリー | とある仕様書 – Yamotty – Medium
グループ共有機能仕様書の公開に踏み切ったのは、10Xのプロダクトがどうやって作られているか、について部分的に触れてもらえると思ったから。 10Xでは「細かな実装・デザインの白兵戦」・「認知と理解を獲得していく空中戦」を一緒に戦えるプロダクト・マネージャーを育てていきたいと思っているので、この仕様書を読んで「10Xで力を試してみたい！」という方はぜひ以下のフォームから応募してほしい。ユーザーの感情を科学できる人が10XのPMにはフィットすると思う。 仕様書の前提となる考え仕様書は「チームのワーキングスタイル」によってその役割をかえるものだ。今の10Xは「ユーザーの前に積まれた膨大な課題の山に優先度を付け、とにかく早くプロダクトをプッシュしていくこと」が最優先のチーム。 そのため、「膝を突き合わせて瞬発力の高いコミュニケーション」を重視している。リモートはしない。 この環境では議論のすべてが口
デザイナーに知っておいてほしいリストUIの基本 - UXエンジニアになりたい人のブログ
当たり前の基本的な話だけ。 リストUIの話。なんらかの「物」を一覧して選ばせたり操作させたりする、あのUI。結論から言うと、リストUIは基本的に、というか、構造としてはほぼ100%この形になる。 解説を組み入れると、こう。 1. 一つの「物」に対する操作実行UI すでに存在する「物」に対する操作を実行するためのUI。厳密に言うと「着目」「処理」「処理へのショートカット」の3種類がある。 1−1.「物」への着目実行UI もっとも代表的な操作例は「編集」または「表示」 一般的には、このUIを実行するとその「物」を1つだけ表示した画面に遷移する（詳細確認画面とか情報入力画面とかそういうの） タップ、HTMLリンク、ダブルクリックなど対象のプラットフォームにおける「選択」に対応する操作体系を割り当てるのが一般的。 1−2. 「物」に対する処理操作実行UI もっとも代表的な操作例は「削除」 ここにど
【iOS】あのUIは何て言うの？iOSのデフォルトUIコンポーネントをおさらいする | 日本VTR実験室
どうもこんにちはJBです。 アプリの開発&デザイン時に、関わる人たちがデフォルトのUIコンポーネントについてきちんと知っているとお互い話が通じやすいし、設計もしやすいですよね！という訳で、今回はiOSのデフォルトUIコンポーネントについてまとめてみたいと思います。 昔、「あの、あれだよ、あの青くてなんか切り替わるヤツ！」「Segmentted Controls?」「何それ」みたいな会話が繰り広げられて時間と労力を多少無駄にしました。 開発しない人も名前ぐらいは知ってた方が良いですね…と言う事をひしひし感じております。そんなわけでiOS8が出るか出ないかくらいの時期に空気を読まず、今回の記事です。 すべて網羅している訳ではないのと、色々端折っておりますのでその辺はあしからずですよ。詳しく知りたい方は、iOSのヒューマンインターフェースガイドラインをご覧ください！ それでは行ってみましょう！
UIに調和とバランスをもたらす！黄金比について学ぼう【UIデザインへの応用方法、解説付き】
効果的なデザインの主な特徴の1つは、明確なユーザーインターフェイスです。ユーザーが画面上の情報を容易に知覚し、努力せずに製品と対話できるように、すべての要素をバランス良く調整して調和させる必要があります。 効率的なデザイン構成を作成するために、プロフェッショナルは、数学の基礎理論だけでなく、芸術科学のさまざまなテクニックや方法を適用します。 魅力的なデザイン構成を構築するのに役立つ一般的なツールの1つは、黄金比と呼ばれる数学的な割合です。 この記事では、このテクニックの本質を定義し、デザインでどのように使用できるかを見ていきます。 黄金比とは？ 黄金比は人間の目にとって最も美しいと思われる様々なサイズの要素間の数学的な割合です。黄金比は1：1.618に等しく、例として貝殻形の渦巻きが描かれていることがよくあります。 では、どのように完全な非対称性が計算されるのでしょう？ まず、小さな要素の
UIとUXの違いの複雑さを知る―Web開発者必見！UIとUXの再定義
開発者の中には、UIやUXなどの用語を同じ意味で使用する習慣があります。 しかし、UXやユーザーエクスペリエンスは、UIやユーザーインターフェイスと同じではありません。 したがって、ソフトウェア開発とデザインについて話すときには、これら2つを区別することが重要です。 この記事は、UI vs UXの複雑さについて説明し、違いの理解を深めるのに役立ちます。 UI vs UX：なぜ2つの言い方があるの？ UXは、UIを置き換えるために発明された言葉ではありませんが、UIはUXの一部として考えることができます。 UIはグラフィックデザインと密接に関連していますが、UXデザインにはテストや研究を含む、より技術的な側面が必要です。 アプリケーションを車両と考えてみてください。フードの下にあるすべてが実行されるコードです。ボディデザインとインテリアデザインは、UXデザインと考えることができます。ペイント
カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと
HOME Contentsquare カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと 皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 大きくきれいな画像を横並びに使い、視覚に訴えるサイトデザインを実現できる「カルーセル」。見るからにカッコいいデザインなので、サイトのクオリティを上げるため「カルーセルパネル」を導入したサイトも数多くあるでしょう。 とは言え、この「カルーセルパネル」を使用するか否かという議論がカルーセルが普及していくにつれて盛り上がってきました。ということで、今回はこの「カルーセル」の是非について、Clicktale社のアナリストが調査した結果を報告したいと思います。 (※2020/8/21更新) カルーセルパネルとは？ そもそもカルーセルパネルって何？ ここ数年多くのサイトに導入されているカルーセルパネル
アンチパターンと言われるカルーセルを改善するポイント
しかし、サイトのカルーセルは果たしてユーザーの役に立つものなのでしょうか？ それとも、ただコンテンツを収納するための常套手段として利用されているだけなのでしょうか。 この問いを誰かに投げかけたとしたら、カルーセルはアンチパターン（よく陥りがちな避けるべき悪い典型例）だと答えが返ってくるでしょう。カルーセルが良いデザインだと思っていない人もいるのです。 Erik Runyon氏による調査によると、サイトの訪問者のうちの１％しかカルーセル上でクリックしないということが明らかになっており、しかもそのうちの84％の人が最初のスライドをクリックしているそうです。 Jared Smith氏は自身のサイトShould I use a carousel?で、もし選択の余地があるのなら、カルーセルを使うべきではないと言っています。おそらくSmith氏の主張はLee Duddell氏の考えからきているもので、
モバイルアプリにおけるナビゲーションUIのデザインパターン
アプリのナビゲーションは、直感的で予測ができなければいけません。新規のユーザーや再訪問したユーザーが、アプリをどのように使ったら良いか迷わないよう、理解しやすくする必要があります。 しかし小さい画面という制限の中で、コンテンツの優先順位を考慮しながら、ナビゲーションを使いやすくすることは非常に難しいです。 この問題に、様々なナビゲーションを使って異なる方法で立ち向かっていますが、多様なユーザビリティの問題に、皆悩まされています。 そこでこの記事では、モバイルアプリの基本的なナビゲーションであるハンバーガーメニュー、タブバーとジェスチャーベースのナビゲーション（タップやフリックを使用したナビゲーション）の３つについて検証し、それぞれの長所と短所を説明します。 ハンバーガーメニュー 画面のスペースは、モバイル上の貴重な商品であり、画面の節約に役立つモバイルナビゲーションのパターンのうち、ハンバ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
usertest-onsearch.com
