Google発「25 Mobile Site Design Principles」のうち特に重要な7つ

services_google_com_fh_files_blogs_principles-of-mobile-site-design-ja_pdf

モバイルサイト設計の指針

今回は、その中でも特に重要な 7 つのヒントをご紹介します。

1. メニューは短く簡潔に

モバイル ユーザーは、長いメニューをスクロールしないと目的の項目にたどり着けないサイトは好みません。メニュー項目はできるだけ簡潔にしましょう。

z7zskDiJSisASIX_Y_eH8gkBT0_Ogymq83-gsCVB4Kv3lZ2KOjrZfCjtmjQSxtDARK-Y-md-JwKe59nbR-yQIYkaRxbzAKJQC_7Y49vWYuC6YX7q3s93xpkjuoohxQL2lQ

2. トップページには簡単に戻れるように

今回の調査で、ページ最上部のロゴをタップしてホーム ページに戻ろうとするユーザーが多く見られました。ユーザーがすぐにトップ ページに戻れる導線を意識しましょう。

fIf4ssc7Ag5r-lVSx8FnN9uy3qYxDZzsSbK7XGOTRPQvFODil5oVieyLEkJkAMoZ8sQLwpUBXNOsLrQAOm6QRifA7Q7wCOYgYVKcs-j6_Gz3EU1ptP0oPHcfrk_bjl8pUg

3. すぐに目につく場所にサイト内検索を設置

サイトでの目的がはっきりしているユーザーほど検索を利用します。モバイル ユーザーが最初に探す機能の 1 つが検索です。今回、調査対象ユーザーから最も良い反応が得られたのは、ページ最上部にはっきりと表示されたオープン テキスト形式の検索ボックスでした。

fiIdUZE1jZYzODSLZae5LWISSboivlt30VnAFzpf4M-FATTSYGFcHEQLo9mI3DCjHD972DDSzy94Iz55lBWv4rfrMr4q7eL6C_zG9VHPtVrnkO5FEwMy5VScc0NV5Jz4jg

4. シンプルな入力方法を提供する

サイトでユーザーに情報を入力してもらう場合、できるだけユーザーの負担を減らす方法を考えましょう。選択肢が少ない場合は、大きいアイコンをタップするだけで済むように、選択肢が多い場合は、プルダウンが最も簡単です。日にちを選ばせる場合には、カレンダーを表示しましょう。

2014-07-31_15-43-52

5. 拡大・縮小いらずで見やすく表示

多くの調査対象ユーザーは、画面を拡大または縮小しなければならない時に不満を感じ、この操作により重要なメッセージを見逃してしまいました。ユーザーがコンテンツのサイズを変更しなくてすむようにモバイル サイトを設計しましょう。一部のモバイル サイトは、画面上で拡大縮小を行えないようにしていました。

NOBHrRb3BPP1BsCREmywY4X8qmUlVdh1UQ6GpjfPeKmipvLwqiPHEesNYsYFDrcY2zhy7oPRzjVDLfnhJNX5BGuk5i6kkEVSC6gjxmItCayZienAHQ7WJguyi23pkxyODg

6. 最適な画面の向きを知らせ

小さい文字を読んだり、動画を観るなど、何かきっかけがない限り、調査対象ユーザーは常に同じ向きで画面を表示する傾向があります。横向きと縦向きの両方に対応できるサイトを設計するか、最適な画面の向きをユーザーに知らせてください。

1evFWegQB6xKVWkuyshjkuWiWMDzGmM3PADDaqk5-m97DHA90LC52NNB1dAkzbQzrPwvPUPwfJ2CQaZdb1uC83E-82XIrK1BgMhD2ZSIZpIb9lhHEz9wuLZ_yy8kuVfnfA

7. 別のウィンドウに移動させない

モバイルではウィンドウの切り替えが面倒なので、ユーザーがサイトに戻ってこないリスクが高くなります。次のページに進んだり、コンテンツの内容が変わっても、同じウィンドウ内で表示する工夫をしましょう。

2014-07-31_15-45-39

ご紹介した全てのヒントに共通しているのは、「モバイル ユーザーは目的がはっきりしている」という点です。モバイル ユーザーがモバイル サイトに求めるのは、目的のコンテンツやサービスをすぐ、簡単に、思いどおりの方法で手に入れること。コンテンツの魅力を損なうことなく、モバイル ユーザーの状況やニーズを考慮してサイトを設計することが成功の秘訣です。

 

以上, Google からのメールの抜粋.


ひさびさに更新したら動かないプロジェクトたち #androidstudio

8/1 になんだかんだというのでちまちまやってるといろんなことがおこる.

【 Android_ID / IMEI を使ったらアウト?! 】8/1 以降 「端末の特定」はすべて Google「広告ID」経由に

build tool を 19.1.0 にする.

android {
    compileSdkVersion 19
    buildToolsVersion ’19.1.0'

Gradle Plugin のバージョンを 0.12.0 以降にする.

buildscript {
    dependencies {
        classpath 'com.android.tools.build:gradle:0.12.+'

Error:The project is using an unsupported version of Gradle. Please use version 1.12.
Please point to a supported Gradle version in the project's Gradle settings or in the project's Gradle wrapper (if applicable.)

gradle/wrapper/gradle-wrapper.properties

distributionUrl=http\://services.gradle.org/distributions/gradle-1.12-all.zip

Error:Execution failed for task ’sample:processDefaultFlavorDebugManifest'.
> Manifest merger failed : uses-sdk:minSdkVersion 17 cannot be smaller than version L declared in library com.android.support:appcompat-v7:21.0.0-rc1

appcompat が 21 を拾ってエラー
→ 19.+ に

dependencies {
    compile 'com.android.support:appcompat-v7:19.+'
    compile 'com.google.android.gms:play-services:+’

Warning:(21, 25) Not targeting the latest versions of Android; compatibility modes apply. Consider testing and updating this version. Consult the android.os.Build.VERSION_CODES javadoc for details.

android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_7
        targetCompatibility JavaVersion.VERSION_1_7

Gradle のバージョンて こんな風になってたのかっ

Android_Studio_Gradle_issue_upgrading_to_version_0_5_0_-_Gradle_Migrating_From_0_8_to_0_9_-_Also_Android_Studio_upgrade_to_0_8_1_-_Stack_Overflow

Android Studio Gradle issue upgrading to version 0.5.0 - Gradle Migrating From 0.8 to 0.9 - Also Android Studio upgrade to 0.8.1 - Stack Overflow


アプリをつくるときに どの Activity UI をメインとするか

「ハンバーガーボタン」もしくは「ナビゲーションドロワー」と呼ばれるナビゲーションUIは数多くのアプリに見られる。Googleもアプリデベロッパー向けにオススメのデザインパターンとして推奨している。

これからは, Navigation Drawer の一択, と思っていたら以下の話.

平均ウィークリーアクセス頻度が下がっている。平均デイリーアクセス頻度も下がっている。結論、「ハンバーガーボタン」ナビゲーションはユーザーにとって受け入れられていない、ということが改めて明らかになった。

使用頻度が低く興味がない人にとっては左上をタップするということは大きな障壁となり、ユーザー離脱へと繋がる可能性が高まってしまう。

アプリUI/UXデザイナー必見!「ハンバーガーボタン」ナビゲーションを使うとユーザーエンゲージメントが半減することが発覚 | gori.me(ゴリミー)

Google まで A/B テスト中 などという話だったりで.

となれば, スワイプ可能タブなスタイルなのか.

Create_New_Project 2

けど,

画面の遷移や表示に, アニメーション付きスワイプ が

そんなにいいとは思わなくね?

端末自体の遷移や起動時のアニメはすべてOFF気味にしていますが.

20140725-130135

ボタンをタップしたらさっさと素早く画面が変わった方が

イライラ少なくね?

誤操作も減るし.

たとえば, LINE とかのように.

LINE

けどこれはこれで, アプリの根本の「設定」画面が見つけづらかったりするような気もしなくもない.

画面たちの構成つか, 意味合いのカテゴリ分けつか

そこを捉えたかったのだろうか Google の Drawer や アクションバーからの Spinner.

Create_New_Project 3

Create_New_Project

てなかんじで,

メインの Acticity つか アプリのルートな画面 というか

どれにすべきか悩んだりしませんか?

Blank Activity から始めると面倒臭すぎるようにも思うし.

Create_New_Project


「Android File Transfer」で 何もできずに Mac 再起動 とか

GUI上のドラッグアンドドロップででAndroid端末に簡単にファイルコピーなどに便利なツールなのですが.

android-101-the-android-file-transfer-app-for-mac-623x490

Android.com - File Transfer

USBでMacとAndroidをつないだ瞬間, 勝手に起動して, Mac画面からカーソルが消えて, キーボードやマウスやパッドの入力を一切受け付けなくなる.

きっとみなさんも イラッとして, 作業の途中でMac再起動とか.

どこかネットで見たフレーズが思い出されました.

AndroidスマートフォンでUSB Mass Storageを利用できずにMTPとかいうゴミ規格を利用している皆さんこんにちは。

ゴミ規格て (笑)

MacでMTPを利用できるソフトウェアであるAndroid File Transferが、端末をUSBで接続するだけで起動してしまい、しかも接続のたびにOSXのUIが10秒程度フリーズしとても邪魔なので対処法を見つけました。

Android File Transferが端末を繋ぐたびに自動で起動して邪魔 - sudo_viの日記

作業途中で, パソコン再起動ほどキレそうになることはありません.

再起動したあと, イラッとしながら調べると, クソ加減が分かります.

Now whenever I plug in certain USB devices that can't be used for transferring files (my Nexus 7 in locked state, an iPhone…) my laptop's built-in keyboard and trackpad stop working [external mouse stays working].

Issue 39548 - android - Android File Transfer breaks MacBook Air built in keyboard and mouse - Android Open Source Project - Issue Tracker - Google Project Hosting

android_file_transfer_freeze_mac_-_Google_検索

android file transfer freeze mac - Google 検索

前述と同様な感じでみんな回避してる雰囲気.

rm -r ~/Library/Application\ Support/Google/Android\ File\ Transfer/Android\ File\ Transfer\ Agent.app
cd /Applications/Android\ File\ Transfer.app/Contents/Resources
mv Android\ File\ Transfer\ Agent.app Android\ File\ Transfer\ Agent.app.disable

Taming Android File Transfer on Mac OS X

この方法で, 自動起動を停止しておけば, 挿した瞬間イラッとすることは避けられるし, 手動で File Transfer を利用することができます.

または, 端末側で「MTP」なる規格をOFFにもできるようです.

ADBなどは通常通り使用できます.

[ 設定 ]-[ ストレージ ]-[ 右上メニュー ]-[ USBでパソコンに接続 ]

20140721-164038

これでスッキリです.


Android のコーディング時にAndroidStudioにセットしておくといい2つのXMLファイル

いつも興味深く読ませていただいております.

これでAndroidStyleを使えるようになる。XMLのインデントがAndroid Studio標準より深かったり、コードの幅が狭かったりして個人的にはそんなに好きなスタイルではないものの、まあこれも時代の趨勢かと思って使うことにした。

Android StudioでのコーディングにAndroidStyle.xmlを適用する - Islands in the byte stream

で, これって Android なりのコーディング規約を, そのコーディングに使う IDE である Android Studio に適用しておく.ということか.

セットする XMLファイルは, URLのパスから分かるように, Android Studio の前身で実績のある intellij の Android 向けコードスタイルの設定 xml を利用している.

platform_development/ide/intellij/codestyles/AndroidStyle.xml at master · android/platform_development · GitHub

ide/intellij/codestyles/AndroidStyle.xml - platform/development - Git at Google

で, 以前 Google の Java コーディング規約がどっかの記事であったよなあ, と.

Google_Java_Style

Google Java Style

この Google Java のコーディング設定用XMLも見つけることができる.

intellij-java-google-style.xml - google-styleguide - Style guides for Google-originated open-source projects - Google Project Hosting

diff で眺めてみると分かるが 大きくは,

インデント
Google : 2
Android : 4

フィールド名接頭文字
Google : (なし)
Android : m

ぐらいか.

どちらかを好きな方を入れて好みに合わせていくのがいいのだろう.