• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Android ui design

  • 3,599 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,599
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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