SlideShare ist ein Scribd-Unternehmen logo
1 von 10
Downloaden Sie, um offline zu lesen
Android information navi design
F’s Garage えふしん
はじめに
• 本書は、AndroidのUIデザインに慣れていないえふしんが、
Androidを触って感じたことを文章化しています。
• ターゲットユーザーは、いわゆるガラパロイドと言われる
スマホを使う、多くの日本人です。
• ここで書いてあることは正しいとかそういう意図ではなく、
広く反対意見が出てくることで、広い視野を得られるようになることを
期待して公開しています。
• 是非、はてブコメントや、@fshin2000までツイートでご連絡
いただけますと幸いです。
• UIの話なのに文字しか書いてなくてすいません。
あと、元データ、パワポですいません。
ナビゲーションメニューは上か下か
• iPhoneは、ナビゲーションバーが上、メニューバーがフッター部にある。
下にメニューを配置しても、iPhoneのハードウエアデザインとの
組み合わせで押しやすいようにできている。
• AndroidはWeb的なイメージ。
同一レベルのメニュー切り替えを、画面上段に置くことが推奨されている。
なお、Xperia arcは、下のハードキーを含めた面積が狭いため
下メニューはかなり下に表示されてしまい、ハードキーを押す時に
誤動作もしやすいです。
• モバゲーのメニューは下にあります。GREEはまんま専用ブラウザです。
GREEもモバゲーも、Webkit内蔵型のブラウザアプリのようです。
日本人の多くのユーザーが、GREEとモバゲーに慣れるという
ことは意識しておいてもよいかもしれません。
(どっちでも良いという可能性もあるし、下の方が主流になる可能性も)
「戻る」「メニュー」ボタンの功罪
• Androidの「戻る」、「メニュー」ボタン、本資料ではXperiaにちなんで、ハードキーと
表現します。
⇒ハードキーはアプリの世界(ユーザー思考)の範囲外なので、
UIナビゲーションは、ハードキーに頼らず作りましょう
⇒インテントの統一感実現にはこのキーは必要です。
機能ありきのUI? (いわゆる「エンジニア的」UI?)
⇒「戻る」は、アプリ間ナビゲーションの意味合いに近いかも。
画面内に戻る要素が提供されるに越したことはない。
⇒ユーザーが「戻る」をうっかり押しすぎた時に、アプリが
終了するのはダサい。
(モバゲーには、文字通り「戻る」ボタンがついています。)
⇒サーチキーは、Xperiaにはついてません。
⇒IMEおよび入力窓を閉じるのに戻るボタンは押したくない。
長押し、右スライドは上級者向け機能
• 長押し、右スライドは、Windowsで言うコンテキストニュー
⇒長押しのメタファは、今のところ一般的ではない
⇒Windowsで言うコンテキストメニュー。ショートカット。
同一の機能が冗長な手段で用意されている
時に、上級者用途で提供するもの。
⇒長押しだけでしか操作できない機能は
「隠しメニュー」以外、提供すべきではない。
(同じ話はUIデザインガイドラインにも存在する)
ハードのメニューボタンに何を提供すべきか
• あまり使わないものを設置する。
いわゆる「設定」のシステム的な機能
• メニューに慣れたAndroid上級者へのナビゲーションを
置いておくと気が利く。
• ここにしかないメニューは使われない可能性が高い。
情報ナビゲーションについては、アプリケーション内にも
同様の機能への動線を設けておく。
情報量vsボタン
• スマホは解像度が高くて大画面だがタッチインターフェース、
ガラケーのカーソルナビゲーション(CUI)よりも 実用面積は狭い。
• タッチインターフェースを意識しすぎて、全てのテキスト情報をボタンに
しようしようとすると、ボタンの実用面積に気を取られすぎて、情報量が
少なくなって、まるでらくらくホンのようなデザインになってしまう。
ガラケーサイトより作りにくいのが、この辺。
• 対策として、情報階層を設計する。
メニューボタンと、ハイパーリンク的なリンクオブジェクトとを分けて考える。
メニューボタンは、いわゆるメニュー切り替えと、アクションに紐付ける。
文章内のリンクなどは、ハイパーリンクのままにして、あえてボタンにしない。
そのかわり、できるだけクリックしやすくするよう努力する。
⇒参考:iPhoneの公式twitterクライアントの個別つぶやきページ
文脈設計を意識しよう!
• ボタンと画面遷移をバラバラに考えてはいけない。ユーザーは、
何故その情報でクリックしたくなるのか?何故メニューとして分かれて
いるのか?を「文脈」の視点から考えること。
(この部分を画面単位で設計しない事、Webの動線設計と同じ)
• クリックして画面が切り替わると、思考は途切れる。
章の切り替え、節の切り替えであれば、ページ切り替えは
自然に許容される。
操作間でストーリーが繋がっているのであれば、できる限り
同一画面で操作させたい。
しかし、スマホのUIには、実用面積に限りがあるので、
アプリケーション設計における戦い所。
そのアイコンはクリックできますか?
• 何故、そのアイコンがユーザーに理解されると思えるのでしょうか?
押すまで機能がわからないボタンはボタンとは言いません。
• ピクトグラムが理解されるコンセンサスは、なんだかんだと
その国の常識や感覚に依存します。
• アイコンが画像だけではクリックできないものと考えましょう。
ユーザーが理解するのは、そこに書いてあるテキストラベルです。
• 例えばWindowsでアイコン画像だけでユーザー認知が
得られているアイコンは、「新規作成」「開く」「印刷」ボタン
ぐらいだと思います。
参考情報
• ANDROiD PATTERNS
http://www.androidpatterns.com/
• Android UI ガイドライン(勝手翻訳版)
https://sites.google.com/a/techdoctranslator.co
m/jp/android/practices/ui_guidelines

Weitere ähnliche Inhalte

Mehr von 真一 藤川

部下に対して「難しいね」で終わらせないマネジメント
部下に対して「難しいね」で終わらせないマネジメント部下に対して「難しいね」で終わらせないマネジメント
部下に対して「難しいね」で終わらせないマネジメント真一 藤川
 
2019/10/31 BASE社発表資料 - EOF2019
2019/10/31 BASE社発表資料 -  EOF20192019/10/31 BASE社発表資料 -  EOF2019
2019/10/31 BASE社発表資料 - EOF2019真一 藤川
 
20180215 devsumi-base
20180215 devsumi-base20180215 devsumi-base
20180215 devsumi-base真一 藤川
 
G's Academy メンター資料 / 20180216
G's Academy メンター資料 / 20180216G's Academy メンター資料 / 20180216
G's Academy メンター資料 / 20180216真一 藤川
 
20171219 / phpway / BASE,Inc.
20171219 / phpway / BASE,Inc.20171219 / phpway / BASE,Inc.
20171219 / phpway / BASE,Inc.真一 藤川
 
Baseエンジニアイベント 20170516
Baseエンジニアイベント 20170516Baseエンジニアイベント 20170516
Baseエンジニアイベント 20170516真一 藤川
 
Mastodon schoo 201705
Mastodon schoo 201705Mastodon schoo 201705
Mastodon schoo 201705真一 藤川
 
Ipmeeting 2016 fujikawa
Ipmeeting 2016 fujikawaIpmeeting 2016 fujikawa
Ipmeeting 2016 fujikawa真一 藤川
 
20161117 base introduce.key
20161117 base introduce.key20161117 base introduce.key
20161117 base introduce.key真一 藤川
 
TechCrunch Tokyo CTO-Night 2015 presentation
TechCrunch Tokyo CTO-Night 2015 presentationTechCrunch Tokyo CTO-Night 2015 presentation
TechCrunch Tokyo CTO-Night 2015 presentation真一 藤川
 
Hacker's meetup boost_vol1発表資料_20150902
Hacker's meetup boost_vol1発表資料_20150902Hacker's meetup boost_vol1発表資料_20150902
Hacker's meetup boost_vol1発表資料_20150902真一 藤川
 
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版真一 藤川
 
Web業界就職戦略
Web業界就職戦略Web業界就職戦略
Web業界就職戦略真一 藤川
 
〜100万人から教わったウェブサービスの極意〜
〜100万人から教わったウェブサービスの極意〜〜100万人から教わったウェブサービスの極意〜
〜100万人から教わったウェブサービスの極意〜真一 藤川
 
ファンドロイド 仙台講演 プレゼン資料
ファンドロイド 仙台講演 プレゼン資料ファンドロイド 仙台講演 プレゼン資料
ファンドロイド 仙台講演 プレゼン資料真一 藤川
 
Startup design-thinkng
Startup design-thinkngStartup design-thinkng
Startup design-thinkng真一 藤川
 
100万人に使われるサービスの作り方 第一歩 (2013/10/12 spinout登壇資料)
100万人に使われるサービスの作り方 第一歩 (2013/10/12 spinout登壇資料)100万人に使われるサービスの作り方 第一歩 (2013/10/12 spinout登壇資料)
100万人に使われるサービスの作り方 第一歩 (2013/10/12 spinout登壇資料)真一 藤川
 
エンジニアの未来サミット for student
エンジニアの未来サミット for studentエンジニアの未来サミット for student
エンジニアの未来サミット for student真一 藤川
 
Twitter user-evolution
Twitter user-evolutionTwitter user-evolution
Twitter user-evolution真一 藤川
 

Mehr von 真一 藤川 (20)

部下に対して「難しいね」で終わらせないマネジメント
部下に対して「難しいね」で終わらせないマネジメント部下に対して「難しいね」で終わらせないマネジメント
部下に対して「難しいね」で終わらせないマネジメント
 
2019/10/31 BASE社発表資料 - EOF2019
2019/10/31 BASE社発表資料 -  EOF20192019/10/31 BASE社発表資料 -  EOF2019
2019/10/31 BASE社発表資料 - EOF2019
 
20180215 devsumi-base
20180215 devsumi-base20180215 devsumi-base
20180215 devsumi-base
 
G's Academy メンター資料 / 20180216
G's Academy メンター資料 / 20180216G's Academy メンター資料 / 20180216
G's Academy メンター資料 / 20180216
 
20171219 / phpway / BASE,Inc.
20171219 / phpway / BASE,Inc.20171219 / phpway / BASE,Inc.
20171219 / phpway / BASE,Inc.
 
Baseエンジニアイベント 20170516
Baseエンジニアイベント 20170516Baseエンジニアイベント 20170516
Baseエンジニアイベント 20170516
 
Mastodon schoo 201705
Mastodon schoo 201705Mastodon schoo 201705
Mastodon schoo 201705
 
Ipmeeting 2016 fujikawa
Ipmeeting 2016 fujikawaIpmeeting 2016 fujikawa
Ipmeeting 2016 fujikawa
 
20161117 base introduce.key
20161117 base introduce.key20161117 base introduce.key
20161117 base introduce.key
 
TechCrunch Tokyo CTO-Night 2015 presentation
TechCrunch Tokyo CTO-Night 2015 presentationTechCrunch Tokyo CTO-Night 2015 presentation
TechCrunch Tokyo CTO-Night 2015 presentation
 
Hacker's meetup boost_vol1発表資料_20150902
Hacker's meetup boost_vol1発表資料_20150902Hacker's meetup boost_vol1発表資料_20150902
Hacker's meetup boost_vol1発表資料_20150902
 
Ssi 20150519
Ssi 20150519Ssi 20150519
Ssi 20150519
 
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
 
Web業界就職戦略
Web業界就職戦略Web業界就職戦略
Web業界就職戦略
 
〜100万人から教わったウェブサービスの極意〜
〜100万人から教わったウェブサービスの極意〜〜100万人から教わったウェブサービスの極意〜
〜100万人から教わったウェブサービスの極意〜
 
ファンドロイド 仙台講演 プレゼン資料
ファンドロイド 仙台講演 プレゼン資料ファンドロイド 仙台講演 プレゼン資料
ファンドロイド 仙台講演 プレゼン資料
 
Startup design-thinkng
Startup design-thinkngStartup design-thinkng
Startup design-thinkng
 
100万人に使われるサービスの作り方 第一歩 (2013/10/12 spinout登壇資料)
100万人に使われるサービスの作り方 第一歩 (2013/10/12 spinout登壇資料)100万人に使われるサービスの作り方 第一歩 (2013/10/12 spinout登壇資料)
100万人に使われるサービスの作り方 第一歩 (2013/10/12 spinout登壇資料)
 
エンジニアの未来サミット for student
エンジニアの未来サミット for studentエンジニアの未来サミット for student
エンジニアの未来サミット for student
 
Twitter user-evolution
Twitter user-evolutionTwitter user-evolution
Twitter user-evolution
 

Kürzlich hochgeladen

持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 

Kürzlich hochgeladen (12)

持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 

Android ui design