thumbnail

【モバイルサイト・アプリのデザイン】事前に避けたいありがちな6つのミス

| 0件のコメント

Pocket
LINEで送る

(読了時間4分)
このみ

こんにちわー ソシャマノートのこのみですー。今日はモバイル端末向けのデザインについて、とても勉強になる記事があったので翻訳してご紹介したいと思います!原文は「Common mistakes when designing for mobile」という記事です。
モバイルサイトやアプリのデザインによくあるミスを6つのケースに分けて教えてくれています。それではさっそくいってみましょーう!(*’u’*)/

ケース1:最初から機能をもりこみすぎる

【問題】 機能の盛り込みすぎで品質が下がる

ソフトウェアを作る際、あれもこれもと余計な機能を実装するのは簡単な事です。
最終期限に間に合わせて良質なソフトウェアを作り上げなくてはならないのに、「この状態ではクールじゃないかも」というフレーズが出たら危険です。もし余分な機能を実装しようものなら、最終期限目前でユーザー体験とデザインのクオリティの低さに苦しむことになるのは目に見えています。

【対策】 最初はシンプルに「小さな実装」から始める

しかし大きな可能性を秘めたアイディアを諦めたくない気持ちもわかります。誰だってきっとそうです。そんな時はこの言葉を思い出します。

「夢は大きく、小さな実装」

プランニングの段階では壮大で突飛なアイディアに思えても、全て紙に書き出します。この時は大物を夢に見てください。そうしてこれ以上のアイディアは出ない事を確信できる状態にまでもっていきます。

それから何を構築するべきか決める時、何を取り入れるべきか厳選します。書き出したアイディアのうち、自分達だけでいくつの機能をリリースすることができるでしょうか?
実装するべき機能や特徴を捨てる時は冷酷になってください。成功するためには夢を大きく描いて、小さく出発する必要があるのです。

まずはすぐに取り掛かりれる事をリリースします。そしてあなたが開発したソリューションが実際にユーザーに好まれているか突き止めてください。
それからやっと徐々に多くの機能を加えることが出来ます。でもそれはアプリケーションの品質を高いレベルで維持することができる場合のみです。もし品質をアップできる機能設計を導き出せなければ、その機能は加えない方が良いでしょう。

機能を増やす事によってユーザー体験を犠牲にする事など決してないように。
「夢は大きく、小さな実装」、我々開発者はその過程にいるのです。

ケース2:整列と間隔に配慮が行き届いていない

Poor alignment and spacing

【問題】 開発者がデザインに億劫

開発者がデザインに億劫。整列と間隔に手を出したがらない。

【対策】 ”デザイン”を分析すると考える

開発者は時々デザインは難しいと言うことがあります。でもデザインがプログラミングのように分析できるものだと知れば、思っていたよりも簡単であるという事がわかります。デザインのすべての要素を正しく整えるために、是非ともデザインの分析・解析の精度を上げてください。

気を付けて頂きたいのは、筆者は別に装飾的なデザインテクニックに従事するべきだと言ってるいるのではありません。あくまで「全ての要素を左端に整列するという事が重要」なのであって、「マージンのpx数などの細かい事」に尽くすという事ではありません。
例えば要素は一貫した間隔を置いて配置されなくてはいけません。それぞれの要素に充分なpadding指定をする事は、モバイル向けのデザインにおいては本当に大切なことなんです。

ケース3:タップできる範囲が指のサイズに対し小さすぎる

Not using finger-sized tap targets

【問題】 画面の中に納めるためにボタンを小さくしてしまう

画面の中に全てを納めようとする時、ボタンのサイズを小さくしたくなります。(簡単で安直な策に誘惑されてしまう。)モバイルで推奨されているタッチ領域のサイズは縦横44px以上です。でも指のサイズと器用さは人によってそれぞれ違います。小さい手でよく操作できるものは大きな手の人にとっては使いにくいかもしれません。

【対策】 タップできる範囲をより大きくする

タップできる範囲の最小ラインをより大きくすることで、ユーザーのガッカリ感を取り除く事ができます。推奨されているサイズはボタンそのものが縦横44px以上あるべきだと言っているわけではありません。ボタンのサイズよりもタップ出来る範囲を大きく取る事で、起動しやすくする事もできます。もしボタンを改善する必要があるのならば、この方法を使って視覚的な表現を変えることなく大きな成果を上げる事もあり得ます。

ケース4:ナビゲーションにパンクズを使っている

Using breadcrumbs in navigation

【問題】 タップ領域の小ささが押し間違いを誘発してしまう

ちょっと想像してみましょう。アプリを閲覧していて4つ目の階層まで苦労して進んだとします。コンテンツを読み終わって、そこから1つ上の階層に上がりたい。でも間違ってパンクズで”Home”をタップしてしまったら?そのセクションを閲覧するまでにしてきた事が水の泡。まるでリセットボタンを押したみたいに。

【対応】「Back」ボタンを使う

パンクズはタップするのに小さすぎるため、ユーザーが間違った個所をタップしてしまう現象を私たちは既に確認してきました。「Back」ボタンは、タイトルバーに設置する事を推奨されています。

「パンクズスタイルのナビゲーションをヘッダに加えることによって、あらゆる階層のページへ移動できる」

そう考え多くの開発者はユーザーにより利便性を提供していると思っていますが、実際には「Back」ボタンに変えることをお勧めします。

ケース5:ロゴがタイトルバーに配置されている

5. Logos in title bars

【問題】ブランドを強調しようと、利便性を欠いた配置にしてしまう

より効果的にアプリのブランディングをするために、ページ名が本来置かれるはずのタイトルバーにロゴを配置するデザイナーが時々います。この方法は前後関係を必要としないトップページなどでは良いと思います。でもそれ以降のページではタイトルバーにはやはりページ名を配置したいところです。ページ名があることでユーザーが前後関係を認識するのを助け、そのページにどのようなコンテンツ・機能があるのかを知らせる事になるからです。

【対策】ロゴをタイトルバーに配置するページを限定する

例えばiPhone向けのTwitterアプリを見ると、ロゴをタイトルバーに配置しているのはトップページだけです。それ以降のページではタイトルテキストを表示しています。

基本的にロゴをタイトルバーに配置するのはトップページなどの限られたページのみで、他はページタイトルにすべきです。もしデザインでより強いブランディングをする必要があれば、ロゴやサービス名を無理やりインターフェースに押し込んで強調するより、色彩設計やスタイルを見直すべきです。

ケース6:ユーザビリティーテストをしていない

Not doing usability testing

【問題】テストの仕方をしらない

基本的にプロジェクトに携わっている人は、ユーザビリティを審査するのにふさわしい立ち位置ではありません。何カ月も開発に取り組んでいたら、最初に触った時の複雑さや不便さを感じ取ることはできません。問題は開発者が自身の偏りを理解せず自分の開発したソフトウェアをテストしている事なのです。

第三者の意見を得ない事は大きな大きな間違いです。

クライアントが怒って電話してきた時はじめて「直感的に操作できない」とわかるなんて考えたくもありません。ユーザビリティ・テストはデザインの過程において極めて重要なのです。しかしそれでも多くの人がユーザビリティ・テストを避けてしまいます。なぜでしょうか?

答えは簡単。開発者はユーザビリティ・テストを実行するのが簡単だという事を知らないからです。

【対策】第三者が操作するところをよく観察する

筆者の言うユーザビリティ・テストは、なにも白衣を着てデザインを事細かに1週間かけて分析・研究をするようなことではありません。

まずはあなたの作るソフトフェアの事を知らない友人を見つけてきてください。ほんのちょっとした説明と共に「この To doのチェックリストアプリどう思う?」と尋ねるのです。それが自分の作ったものである事を話す必要さえないです。(その方がフィードバックが率直になりやすい事があります。)

そうして友人がそれを使うところを観察してください。テキストを読むために止まるところ、ボタンをたたきはじめる時、彼が動きをとめたページに注意を払います。
きっと想像以上に早く、彼と同じくらいの感覚で直感的に操作できない個所を発見する事ができるでしょう。

あとがき

開発者・デザイナーが起こしうるミスは沢山あります。でもこの6つのケースを覚えておくことで何かを得られるのではないかと思います。

この記事で最も重要な概念は機能実装を精錬する事ユーザビリティテストです。この2つを正しく実行すれば全ての問題は収まるはずです。ここに上げた間違いは全てとても簡単に起きてしまいます。でももしこれらの問題を避けることができたら、あなたが生みだすモバイルのユーザー体験はずっと洗練されたものになります。ぜひ参考にしてください。

 

このみ
なるほどー…。本質的なところから表層の細かいところまで、わかりやすく解説してくれてますね。「夢は大きく小さな実装」というのはとても心にささるフレーズでした。モバイル端末の重要性が増していく中、こういった事前に対策をたてられる記事はとても有用だと思いました。

今回ご紹介した記事は、webdesigner depotという海外のブログメディアに掲載されているものです。デザインに関する情報が頻繁にアップされているので、ぜひぜひご覧になってみてください!それでは本日はここまで!次回もお楽しみに!ありがとうございましたm(_ _)m

Comments

comments

作成者: このみ

㈱マイネット デザイン業務の傍らソシャマノートブログとそのFacebookページを運営。楽しくワクワクするような事を追いかけたい!

コメントを残す

必須欄は * がついています



*

イラストレーター大募集中!!

漫画家大募集中!!

イラスト制作依頼ならフーモア!

3DCG、Spine制作ならフーモア!

プロの漫画制作ならフーモア!