ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
SpinKit
.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
小さい子どもにコンピュータを触らせるということ - ビスケットのあれこれ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
matarillo.com: UIパターン
UIパターン 追記 この記事の一部を加筆・修正したものを「開発者が知っておくべき、6つのUIアーキテクチャ・パターン」として@ITに転載しています。 MVVMを追加した上で、アプリケーションモデルとMVVMをプレゼンテーションモデルのバリエーションとして位置づけました。 MVPの2つのスタイルとして、監視コントローラとパッシブ・ビューを説明しました。 まえがき Martin Fowlerの"GUI Architectures"を訳したので公開しようと思ったのだが、FAQページに「EAA developmentとかDSLなんかは商業出版するんで例外ってことで」と書いてある。面倒だったので翻訳の公開はやめて、「自分の理解を書く」というスタイルにしようと思う。 Fowler氏が説明しているのは 「フォームとコントロール」、「モデルビューコントローラー (MVC)」、「プレゼンテーションモデル」、
Smashing Android UI レスポンシブUIとデザインパターン
Smashing Android UI レスポンシブUIとデザインパターン Juhani Lehtimäki, 佐藤 伸哉(監訳), 株式会社クイープ(翻訳) インプレス 2,723円 (2,476円+税) 販売終了 最適なデザインのための本格的なAndroid開発ガイドラインユーザーを虜にするキラーアプリを作成しよう！ 本書は、ユーザー中心設計を開発プロセスに統合し、圧倒的な存在感を示すAndroidアプリを作成するために必要な知識とツールを提供します。 関連サイト出版社による関連ページが公開されています。 Smashing Android UI レスポンシブUIとデザインパターン内容紹介優れたUIデザインは、世界にはばたくアプリを生み出す可能性があります。UIデザインがうまくいかないと、モバイルダッシュボードでほこりをかぶっているアプリになるかもしれません。本書は、ユーザー中心設計を開
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗ
アプリのプロトタイプ・デモ画面がつくれるツールまとめ | アプリマーケティング研究所
アプリのプロトタイプ・デモ画面がつくれるツールまとめ アプリをつくるときに開発者＝企画者の、 個人開発者であれば良いのですが、 企画者と開発者が分かれている場合、 クライアントにアプリの提案をしたい場合、 社内の会議でアイディアを共有したい場合、 なかなか言葉でアプリの内容を伝えるのは難しいものです。 そんな時に役に立つ、 アプリのプロトタイプ・デモ画面がつくれるツール、 をまとめてみました。 エックスビーンズ プロトタイピング プログラム知識のない方でも、 パワーポイントなどの資料を作成する感覚で、 ドラッグ＆ドロップを中心に、 スマホで動くプロトタイプを作ることが出来ます。 フェード・ムーブインなど画面遷移時の、 簡単な演出も設定することができるようです。 PC上で編集し、プレビューまで無事完了したら、 スマホにデータを転送して完了です。 ※androidのみ。 事前にスマホ側にビュー
Android Tips #45 Dialog をフルカスタマイズする | DevelopersIO
はじめに 以前より社内で Dialog のデザイン変えたりレイアウト変えたりいろいろカスタマイズしたい！という要件を耳にすることが多いのでフルカスタマイズする方法を書き留めておきたいと思います。今回は例として下図のようなレイアウトの Dialog を作ってみたいと思います。 DialogFragment をカスタマイズする まず大前提として DialogFragment を継承したクラスでカスタマイズしましょう！ Dialog を new して show するのはもう時代遅れです。Support Package を使えば Android 1.6 から使うことができますよ。 CustomDialogFragment.java package jp.classmethod.android.sample.customdialog; import android.app.Dialog; impor
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ログイン - はてな
PCサイトのUIデザインにおける12のトレンド