ダメなUIを作るコツ｜yumemi
先日、「イカれたUIを作ろうの会」というオンラインイベントを開催しました。多くの皆さまにご参加いただき、誠にありがとうございました。 また、当イベントでは期待以上に自由で多様なUIがお披露目され、おおいに血湧き肉躍りました。主催者としてうれしい限りです。 ちなみに社内でも「ダメなUIを作ろうの会」と銘打って勉強会を実施しました。こちらもクローズドな空間ならではの盛り上がりを見せました。 社内での勉強会のお知らせ背景そもそもこのような会を実施した背景には、つぎのように思ったことがきっかけでした。 エンジニアとかUXとかDXとかHCDとかと比べてUIのイベントが少ない気がする。酔いどれUIデザイン選手権をやりたい。一番イカれたUIをデザインしたやつが勝ち。 — yumemi (@n__yumemi) January 24, 2023 たとえば、connpassで検索したときの結果は「UIデザイ
アプリのアップデート300本ノックから学ぶUI改善のヒント｜宮﨑 晃
こんにちは、HR業界でアプリマーケティングをしている宮﨑です。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで投稿すること3ヶ月。300本以上のネタが溜まってきました。 今回のnoteでは「フォッグの消費者行動モデル」というフレームワークを使ってまとめていきます。 行動 = 動機 × 実行能力 × きっかけ ザックリいうとユーザーに何か行動を促す際に「動機/実行能力/きっかけ」の3要素をどう揃えるか？というモノ。 詳しくは深津さんの記事がとってもわかりやすいのでおススメです。 アプリノックがUI改善の勘所だけでなく、Growthの知識も一緒に学べるコンテンツになっていくと嬉しいです。 それではいってみましょう！ 【動機】がないと、やる気にならない①慣れない体験にはイメージ作りを よくわからない体験は
ユーザーインターフェイス解剖学・改訂版（公開版）
社内イベントで登壇した際のスライドです。｢ユーザーインターフェイス解剖学｣の改訂版。主に、UIデザインにおいて検討した方がよい／すべき考え方というものを簡単にご紹介しました。
フォームデザインではおしゃれさよりも使いやすさを！ユーザーを離脱させないUIデザインの14のポイントを解説
Webサイトのゴールの代表的なものといえば、「問い合わせ」「資料請求」「会員登録」「決済（ECサイト）」などですが、いずれもユーザーの情報を入力してもらうことにあります。 せっかくうまく目標のページまでユーザーを導けても、情報を入力する「フォーム」のUIが残念な状態だと、ゴール目前で離脱を誘ってしまいますね。 そこで本稿では「フォーム」に関するデザインのガイドラインを確認しておきましょう。 「フォーム」のUIデザインの14のポイント 以下の画像は、左「Do（推奨される）」右「Don’t（すいしょうされない（非推奨）」の順に並んでいます。 【1】フォームは1カラムに フォームが並列に並んでいると（右図）、ユーザーの垂直方向の推進力を阻害してしまいます。フォームは基本的に「垂直」に並べるのが適切です。 【2】ラベルはフォーム上部に置く フォームの項目を示すラベルは上部に置くと、左サイドに置くよ
Webデザインでよく使うUI要素の名称・用語一覧 - Qiita
Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの
iOS ヒューマンインターフェースの原則 — Medium
iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴から情報設計の原則、それぞれ何のための部品なのか、という解説がされています。なぜこうなったのか、なぜこれが良くてあれが駄目なのか、Apple の UI デザイナーは何を考えてこのような設計にしたのか、HIG ではそのようなところまでは説明されていないことがあります。いくら内容を丸暗記したとしても「 なぜ 」がわからなければ本質から理解したとは言えません。 よくある UI デザインにおける誤り、『磨りガラス効果がかっこいい』『アニメーションしておくとかっこいい』『ボタンは右配置の方が押しやすい』『色が綺麗』『流行っているから優れている』…などがありますが、そういうことではない
僕が予期的UXにフォーカスする理由
この記事は専門用語がいくつか出てくるためわかりにくい場合もあると思います。そんな方のために一般的な用語に限ったバージョンも書きましたので、よろしければお読みください。 モノづくりの4つのゴールひと目見れば誰でもわかることですが、サイクルであるということは、「循環」していることと「等価」であることを示しています。 そして、まったく当たり前のことですが、4つのゴールの考え方としては、「ユーザーの行動」を生み出すものは、「ユーザーの体験」です。 （僕自身は必ずしもこの「ユーザーの体験」がいわゆる「UX」と同じものであるかどうかは判断していません。） それを前提として考えを深めた結果、僕はまず予期的UXにフォーカスするという考え方に至ったので、その理由としての経緯を書き留めておこうと思います。 ユーザー体験の時間区分そのいわゆるUXには、「Time spans of user USERexperi
最近のWebのUIデザインで採用されているナビゲーションのパターン16種類のまとめ
最近のWebのUIデザインで採用されているさまざまなナビゲーションの名称とその役割、使う時のポイントを「Web UI Design Patterns 2016」から紹介します。 検索のナビゲーションは、ユーザーが特定の何かを探していて、それがどこにあるか分からない時に直接その何かにアクセスすることができます。 最も基本的なパターンはメインのナビゲーションに検索のオプションとして含めることで、右上に配置するのが人気です。虫眼鏡アイコンを添えたり、ドロップダウンで拡張した検索機能にしてもよいでしょう。 Notifications: 通知 ユーザーが何らかの操作をした時、もしくは新しい内容を伝える時に知らせることができます。 通知が普及したのは、ソーシャルメディアサイトにおけるプッシュコンテンツの影響が大きく、他のサイトでも通知を利用して新しいコンテンツやプロダクトやコメントを知らせるようになり
ERRP | Expired Registration Recovery Policy
Please notice: This domain name registration has expired and renewal or deletion are pending. If you are the registrant and want to renew the domain name, please contact your registration service provider. Bitte beachten Sie: Diese Domainregistrierung ist abgelaufen und die Verlängerung oder Löschung der Domain stehen an. Wenn Sie der Registrant sind und die Domainregistrierung verlängern möchten,
iOSアプリケーションでコードベースのレイアウトを積極利用する - クックパッド開発者ブログ
海外事業向けのiOSアプリケーション開発を担当している西山(@yuseinishiyama)です。クックパッドは現在、海外複数カ国に向けてサービスを展開しています。 XcodeにはInterface Builderと呼ばれる、リッチなGUIを持ったデザインツールが付属しており、これを用いて画面のレイアウトを構成することが主流となっています。弊社ブログでも、iOS開発でstoryboardとxibをうまく使い分けるプラクティス等の記事で、GUIベースのレイアウトについて触れています。しかし、現在私が担当しているプロジェクトでは、Interface Builderを用いずに、レイアウトの大半をコードで記述しています。 今回は、コードベースのレイアウトを実装していく中で得た知見を、以下の3つの部分に分けて共有したいと思います。 Interface Builderを用いたレイアウトとコードベースの
Auto Layout Tutorial in iOS: Getting Started
Mar 6 2019 , Swift 4.2, iOS 12, Xcode 10 Swift 4.2, iOS 12, Xcode 10 In this Auto Layout tutorial, you’ll learn how to use constraints and apply them to making iOS apps. By Naeem Shaikh. Sign up/Sign in With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more! Create account Already a member of Kodeco? Sign in
SmartNewsのようなUIを実現するライブラリ3つを比較してみた - アニマネ開発日誌
スマートニュースのようなフリックでページを移動したり、タブをスクロールしてページを選ぶような感じのUI。 最近はかなり増えているので今更な感はありますが、アニマネ の次期バージョンでも導入を検討中です。 一から実装せずともいくつかライブラリがあるようなので、試してみました。 比較したライブラリ はじめにざっくりとした比較表を。 2015年9月前半に比較していたので、今はまた状況が変わっているかも知れません。 あくまで参考程度に見て頂ければと思います。 ※追記 下記のライブラリもオススメです。 言語 ライブラリ 言語 RMPScrollingMenuBarController Objective-C PageMenu Objective-C,Swift PagingMenuController Swift 対応OSバージョン ライブラリ バージョン RMPScrollingMenuBarCo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
戦略からUIまで伴走するUXリサーチ
デザイン原則の実践｜dely design
http://www.life-is-bitter.com/entry/ui_checklist
The 7 Best Prototyping Tools for UI and UX Designers in 2018
全エンジニア・全デザイナー必見！UI/UXを入門からマスターできるスライド資料25選 | iPhoneの神様
Styling Android
[iOS] UI/UX系 用途別OSSまとめ | DevelopersIO![[iOS] UI/UX系 用途別OSSまとめ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c83d413afe58d904e71a2ee3e849a272825f43c1/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F01%2Fios_ui.png)
ログイン - はてな
