優れたボタンデザインのための７つのガイドライン
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ボタンはインタラクションデザインに欠かせない要素です。ユーザーとシステムの意思伝達において大切な役割を担っています。この記事では、効果的なボタンを作成する際に知っておくべき７つの基本原則について説明します。 １. ボタンをボタンらしく見せる UIを操作するとき、ユーザーは「クリックできる」ものとそうでないものを即座に知る必要があります。ユーザーは、デザインされたすべてのアイテムを解読しなければなりません。そのため一般的に、ユーザーがUIを解読するのに必要な時間が長くなればなるほど、ユーザーにとって使いにくくなります。 しかし、ユーザーはどのようにして要素がインタラクティブかどうかを判断するのでしょうか？ UIのオブジェクトを理解するために、ユーザーはこれまでの経
クリエイティブなタブバー型ナビゲーションを考える | UX MILK
モバイルナビゲーションの基本パターンを選ぶときに、プロダクトデザイナーは２つの選択肢から選びます。ハンバーガーメニューとしても知られるドロワー型か、タブバー型です。どちらのナビゲーションにも長所と短所があります。 この記事はそのうち、タブバー型に関するものなので、ドロワー型を上回るタブバー型の利点から話しましょう。 ユーザーの現在地がひと目でわかる。アプリの中で自分がどの位置にいるのかをメニューを開いて確認する必要がありません。ひと目で知ることが可能です。 見つけやすさ。ユーザーはトップレベルのナビゲーションオプションを最初から見ることができます。 指の届く範囲にある。タブバーは届きやすい場所（画面の１番下）に位置しています。ユーザーは指を伸ばして選択する必要がありません。 しかし、タブバー型にはいくつかの欠点があります。 ナビゲーションに載せる選択肢の数が限られる。タッチ箇所が小さくなり
スマフォアプリで見る UI の気付き
この記事は「#UI Design Advent Calendar 2015」第18日目の記事です。 スマフォアプリの普及により、UI デザインの需要は年々増しています。最近になってアプリの UI デザイナーとしてお仕事を始められた方も多いかと思います。UI デザインは、原則や関連知識の理解を深めることも重要ですが、ケーススタディとしてみることでスキルの習得も早くなります。 今回は、これまでユーザビリティの観点で監修したアプリ UI の中から、ユーザビリティテストのスコアリングが低くなる傾向のデザインパターンをご紹介します。それらは少し見直すだけでスコアが改善されるというのもまた特徴です。やってしまいがちな失敗 UI ケースの入門として、ご参考になればと思います。 スコアリングの指標 アプリ UI のユーザビリティ測定には、アクセシビリティや他の定義を考慮することもありますが、今回のスコアリ
ドロワーというナビゲーションの再考 | UXデザイン会社Standardのブログ
以前Facebookのアプリケーションで採用されたことを皮切りに、ここ数年で多くのアプリケーションで使われることになったドロワーというナビゲーションについての考察です。 最近ネット上でも話題になっており、安易なナビゲーションへの採用が見直されているされているインターフェイスでもあります。しかしドロワーの必要性について疑うことは良いのですが、表面的にただドロワーを使ってはいけないという情報に左右されていては、安易なドロワーはなくなったとしても、次に安易なタブなどが量産されるということが予測できます。 UIに関わるデザイナーとしては、なぜドロワーが適していないのかということと同時に、どのような状況下であればドロワーが適しているのかは考え続ける必要があるでしょう。 ドロワーの歴史 まず名前の由来としては、たしか2013年にAndroidでナビゲーションドロワーのためのフレームワークが公開されたこ
君たちはそんなにハンバーガーメニューが好きなのかね？
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
iOSヒューマンインターフェイスガイドライン まとめ (Alert ActionSheet ModalView ) - Qiita
はじめに エンジニアとしてプログラミングだけではなく、見やすい・使いやすいUIやユーザ体験を考慮する必要性があると感じ、今後iOSヒューマンインターフェイスガイドライン通して学んだことやUI/UXに関する知識をQiitaに投稿していきたいと思います。 今回はアラート、アクションシート、およびモーダルビューについての内容になります。 外観や動作 アラートの外観が独立しているように見えるので、アプリケーション・デバイスの変化を意味し、ユーザが最近行った結果ではないことを感じさせる ユーザはアラートを閉じなければ現在実行中のアプリケーションの使用を継続できない 少なくても一つのボタンを含み、テキストフィールドを含めることが可能 アラートの幅・背景の外観・テキストの配置(中央揃え)については変更ができない 1. デバイスの向きによる外観テストを行う 2. 一般的に、二つのボタンを設置 3つ以上の選
ユーザーインターフェイス解剖学・改訂版（公開版）
社内イベントで登壇した際のスライドです。｢ユーザーインターフェイス解剖学｣の改訂版。主に、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のどちらも殆ど同じデザインです。 実生活で利用する照明などのスイッチと同じで、 右側がオン、左側がオフになっています。 どち
【iOS】あのUIは何て言うの？iOSのデフォルトUIコンポーネントをおさらいする | 日本VTR実験室
どうもこんにちはJBです。 アプリの開発&デザイン時に、関わる人たちがデフォルトのUIコンポーネントについてきちんと知っているとお互い話が通じやすいし、設計もしやすいですよね！という訳で、今回はiOSのデフォルトUIコンポーネントについてまとめてみたいと思います。 昔、「あの、あれだよ、あの青くてなんか切り替わるヤツ！」「Segmentted Controls?」「何それ」みたいな会話が繰り広げられて時間と労力を多少無駄にしました。 開発しない人も名前ぐらいは知ってた方が良いですね…と言う事をひしひし感じております。そんなわけでiOS8が出るか出ないかくらいの時期に空気を読まず、今回の記事です。 すべて網羅している訳ではないのと、色々端折っておりますのでその辺はあしからずですよ。詳しく知りたい方は、iOSのヒューマンインターフェースガイドラインをご覧ください！ それでは行ってみましょう！
アプリのUIデザイナーとして働き始める時に覚えておくと便利な用語（基本編） | DevelopersIO
こんにちは。2016年もあと3週間を切り、迫る年の瀬にしんみりとしている宮嶋です。 クリスマス？知らない子ですね……。 はじめに 私がUIデザイナーになって5ヶ月、iOSとAndroidどちらの作業をしていてもよく出てきた用語の中でも 覚えておくと周りとの認識の共有がスムーズになるかな？と思うことについて書いていきます。 用語集 UI ユーザーインターフェース（User Interface） 機器やシステムと利用者間で情報をやり取りするための仕組み。 ここではよくアプリやWEBの画面構成として使われている……ような気がします。 UX ユーザーエクスペリエンス（User Experience） ユーザー体験とも言います。システムやサービスを利用したことにより、利用者が受ける影響を 動作や感情、知覚など様々な面から予期したものであったり、実際に利用者が体験したことであったり、定義が広いです。
ナビゲーション/メニューのiPhoneアプリデザイン集22選
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
nvtrlab.jp
usertest-onsearch.com