オブジェクトベースなUI設計を学んだら視点がガラリと変わった話｜Yutaro Murakami
同僚である@akira_motomuraにオススメされて、上野学(@manabuueno)さんのオブジェクト指向やOOUIに関する記事を読んでみたのですが、 個人的にサービスをつくる際の視点がガラリと変わったのでまとめてみたいと思います。 オブジェクトベースなUIとは？オブジェクトベースなUIとは、オブジェクト（ユーザの関心の対象物）を手がかりに操作設計されたユーザーインターフェースのことを言います。 （OOUIとも呼ばれている） 代表的な例としてApple製品が取り上げられることが多いのですが、例えばiPhoneの写真アプリだと、ある写真に対して何らかの処理を行いたい場合、ユーザーはまず対象のオブジェクト（写真）を選び、その後にアクション（編集、送信、お気に入り、削除）を選ぶ、という流れになります。 ソフトウェア（アプリ）は実態がないのでわかりにくいのですが、基本的には自分を拡張する道具
iOSアプリのUIテストを分かりやすくするPage Object | Wantedly Engineer Blog
こんにちは。iOS エンジニアの永田です。今日は XCUITest で UI テストを書いたことがある方向けに、UI テストをより分かりやすく書くための Page Object を紹介したいと思います。 Page Object とは Page Object とは、アプリケーションのページを抽象化したオブジェクトのことです。Page Object はそのページ固有の操作やアサーションに必要なページの状態を提供します。 本記事では、Page Object を利用するモチベーションとその実装例をご紹介します。 UI 統合テストでの問題点 XCUITest を利用すると、UI の要素やその状態の取得、タップなどの操作をメソッドを呼ぶだけで簡単に実現することができます。しかし、テストケースごとに必要な要素を用意してシナリオを満たすようにコードを書いていくと、1つのテストケースが非常に長いコードになっ
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
iOSにおける半モーダルビューの解釈｜usagimaru
iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー（Semi-Modal View）」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。 今回はパターンとしてあえて区別することで他のモーダルビューとの違いを明確にし、その特徴や仕組み、正しい設計とはどのようにあるべきかを理解しやすくすることを目指します。なお、2019年版のHIG（すなわちiOS 13対応版）からはモーダルビューのスタイルの一つとして Sheet の記述が現れるようになりましたが、今回は Sheet スタイルに限らずもう少
マリオメーカーのUI/UXデザイナーが語る「弱点を克服する娯楽UI」の原点とは | 超ゲームウォーカー!
2018年4月27日（金）、東京は渋谷ヒカリエ11Fにて、UIデザインをテーマとした勉強会「UI Crunch」が開催された。2014年に開催された第1回目の開催から本年で4年目、通算13回目となるUI Crunchだが、今回はいつも以上に開催前から話題が絶えなかった。それもそのはず、普段なら多い時でも参加枠に対する応募倍率は3〜5倍程度なのに対して、今回はなんと、まさかの30倍超え。 その理由は明白だ。マリオやゼルダなどの歴史あるゲームシリーズを手がけ、近年ではスプラトゥーンやARMSといった新規IPの開発にも余念がない、我らが日本の世界的ゲームメーカー「任天堂」のUIデザイナーが登壇するからだろう。 普段からあまり対外的な発表やコミュニケーションが控えめな印象である任天堂の社員が、珍しく、それもUIデザインという文脈でイベントに登壇するというのは、過去にあまり例がない。 今回登壇したの
メールアドレスの確認フィールドをなくすべき理由
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
UIデザインにおけるボタン:スタイルの進化とベストプラクティス | POSTD
ボタンはごく普通の、インタラクションデザインの日常的な要素です。ボタンはとてもシンプルなUI要素に見えますが、過去数十年間でそのデザインはかなり変わってきました。しかし今でもボタンのUXデザインは認識しやすさと明確さについて言及されています。 この記事ではボタンデザインの発展を辿りながら、有効なボタンを作るために何が最も重要で最適なのかを見つけて行きたいと思います。 スタイルの発展 3Dボタン 初期からオペレーティング用のボタンは、周りのコンテキストと区別するために、浮き彫りと影に依存していました。この設計の解決策は枠、グラデーション、ドロップシャドウを使用して、要素を背景やコンテンツから目立たせ、クリック可能な要素だと簡単に認識できるようにするといった単純な原則に基づいていました。 ボタンが浮かび上がっているように見えます。 このWindows95のダイアログボックスは、濃い影とハイライ
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や
UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog
最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり
Themes - iOS - Human Interface Guidelines - Apple Developer
iOS Design Themes As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differentiate iOS from other platforms: Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design for Bootstrap 5 & 4
日本語アプリケーションのインターフェイスデザイン（公開版）
ユーザーに考えさせちゃダメ！ クルーグのWebユーザビリティ第一法則 | 超明快 Webユーザビリティ［Web担特別公開版］
ページネーションのベストプラクティス | POSTD
jQuery formBuilder/formRender Demo
新着記事
GitHub - OfficeDev/office-ui-fabric-core: The front-end CSS framework for building experiences for Office and Microsoft 365.
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
AppSeed - Turn sketches into functioning prototypes fast by AppSeed Team — Kickstarter
Loading Effects for Grid Items | Demo 1