Excite Designer's Blog

【エキサイト英語翻訳】UIデザイン変更時のポイント

e0292726_174885.jpg

iPhoneアプリ「エキサイト英語翻訳」は2012年の11月26日にメジャーアップデートを行い、大幅にUIを変更しました。
(UIの詳しい用語説明はこちら→5分でわかるUIとUXの違い

既存ユーザの多いアプリですので、UIデザインには気を使いました。
当然のことですが、アップデート前より使い勝手が悪くなってはいけないのです。
この記事ではUIデザインの変更で気をつけるべきポイントや、工夫した点などをお話したいと思います。





デザインテイストの方向性

アップデートを行うにあたり、ユーザがどんなことを求めているかを箇条書きにしてみました。

・素早さ
・簡単な操作
・安心感
・信頼性
・繰り返し何度も


素早さ
これはどんなアプリでも望まれることですね。
思いついた時にすぐ立ち上げてすぐ結果がわかる!それがスマートフォンアプリの醍醐味であり存在意義だと思います。

簡単な操作
早く結果を見たいのにユーザを惑わせてしまってはいけません。
出来る限りシンプルで迷わないインターフェイスである必要があります。

安心感/信頼性
数多くの翻訳アプリの中から「エキサイト英語翻訳」を選んでもらう上で最も大切なことかと思います。
App Storeではアイコンとスクリーンショットと説明文言でしかアピールできませんので、デザインで安心感/信頼性を伝えなくてはいけません。

繰り返し何度も
昨年の10月のデイリーユーザ数と翻訳を実行した回数から、1ユーザの翻訳回数の平均を計算してみました。
約4.3回/日
ユーザは1日のうちで何回も翻訳を実行しています。
ですので、「繰り返し何度も翻訳できる」という機能があればもっと使いやすいと考えられます。
これは、既存の英語翻訳アプリのUIでは考慮していない部分でした。

元々はポップなデザインだった「エキサイト英語翻訳」ですが、
上にあげた点を踏まえ、安心感/信頼性のある落ち着いたシンプルなデザインにすることに決めました。

e0292726_18195562.jpg




起動画面で体感的な素早さを

アプリの起動が早いということはとても大事ですが、コンマ数秒はどうしてもかかってしまいます。
「Loading」という文字が出たりプログレスバーが現れるのは親切ではありますが、ユーザに「待たなくてはいけない」という意識を与えてしまいます。
そこで「エキサイト英語翻訳」では、下図のように起動画面を枠だけの画像にしました。

e0292726_17122835.jpg

そうすることで、すぐにトップが立ち上がっているように感じることができます。
これはApple純正アプリの「メール」から学んだ工夫でした。
起動画面で上下の枠が出てくることで、アプリの起動も素早く感じます!
もちろん、アプリ自体の動作をスピーディにするにこしたことはありませんが、見せ方を工夫することでスマートに見えます。
起動画面の上にゆるやかに文字が浮かびトップ画面が表示されるので、上品にも見えるかと思います。



迷わない簡単な操作

原文/翻訳/再翻訳のテキストを表示するテキストエリアにそれぞれ、「Copy」「Clip」「Share」のボタンがあります。

e0292726_21048.jpg

「保存/消去」を押すことで一連の翻訳結果が「History」に保存されます。
その際にツールバーの「Histoy」アイコンの横にバッジが表示されます。
バッジナンバーは「Histoy」内の未読の内容の数を示します。

e0292726_2103898.jpg

「保存/消去」を押し、瞬時にバッジを表示することでどこに格納されたのかがわかりやすくなったかと思います。

同じように、「Clip」を押すと「Check」アイコンに差し変わり、ツールバーの「Clip」アイコンの横にバッジが表示されます。
e0292726_2105813.jpg

言葉で説明すると長くなってしまいますが、アイコンの表示や変化を明確にすることで迷わない動線になると考えられます。



安心/信頼できるデザインとは

今回のデザインでは、いやらしくなくテクスチャを見せること、に気をつけました。
Retinaディスプレイは細かい繊細な文様も綺麗に見せてくれますが、アプリのメインはコンテンツであり機能です。
デザインは主張をしすぎないことが肝心です。
使ったテクスチャは、白テーマの方がメタリックなもの、黒テーマはグレイにノイズの入ったものです。
どちらも画面がうるさくならないように薄く、控え目に使っています。
質感を出すことで品質の高さを視覚的に訴え、安心感と信頼性を感じとってもらえるかと思います。

また、ナビゲーションバーやツールバーの上下に薄いグラデーションをかけています。
少し見ただけでは気付きにくいですが細かいところに手を加えるだけで、シンプルだけど手のかかったデザインに仕上がるのではないかと思います。

e0292726_18583026.jpg




指先ひとつで爽快に翻訳

前デザインでは、原文 - 翻訳 - 再翻訳をそれぞれタブボタンで切り替えるUIでした。

e0292726_1751881.jpg

より直感的なUIにするために、新デザインではスワイプで画面を左へ送ることで翻訳が実行されます。
(矢印アイコンのボタンや、文字入力画面の翻訳ボタンでも翻訳が可能です)

e0292726_17511542.jpg

右端の青枠で囲った部分に見切れたテキストエリアを見せることで、直感的にコンテンツが続いていると気付かせることができます。
スワイプしていくことで、原文 - 翻訳 - 再翻訳 - さらに翻訳 - さらに翻訳 - さらに翻訳...と永遠に翻訳が実行されます。
いちいち画面を切り替える必要がなく、原文に戻りたい場合も感覚的にスタート地点へ指を辿らせることができます。



統括

昨年の11月26日にアップデートを行い、その後1ヶ月間で10万DLを記録しました。
その結果、累計DL数が100万を超えました。
また、アップデートに伴い、App Storeやレビューサイトさんでも多数ご紹介いただき、
翻訳カテゴリ1位/無料総合69位を獲得しました。
デイリーアクティブユーザは2万人、月で20万人を越える方々にご利用いただいております。(アップデート前比160%強)
起動回数、翻訳実行回数も180%強を達成いたしました。

既存ユーザが多いと大がかりなアップデートが戸惑われますが、
ユーザの目線に立ち、何を求めているのかどうすればもっと使いやすいのかをじっくりと考えることが非常に大切です。
それをUIや機能に反映させることで、既存のユーザにも新規のユーザにも満足してもらうことができれば素晴らしいですよね。

より多くの方に使っていただけるアプリになるよう、今後も改良を続けていきます。
これからも「エキサイト英語翻訳」をどうぞよろしくお願いします!

Android版「エキサイト英語翻訳」もまもなくメジャーアップデートします。ご期待ください!



by spdesigner | 2013-02-05 10:00 | design | Comments(0)


Exciteのデザイナーのブログです。


by spdesigner

プロフィールを見る
通知を受け取る

検索

カテゴリ

design
アプリ紹介
検証
Tips
ブックマーク
iOS

外部リンク