browzer

キーワード入力を快適にするブラウザアプリ

browzer

キーワード入力を快適にするブラウザアプリ

  • 自主制作
  • セルフアイデアソン

Overview

本作品は、自身の取り組みである「セルフアイデアソン」で制作した作品です。 スマートフォンで検索をする際、入力が長くなると全体が見えなくなったり、その状態でキーワードを編集しようとすると、カーソル移動しないといけなかったりと、操作性が悪いという課題があります。 本アプリでは、操作性向上を目的とした新しいキーワード検索UIを提案します。


※セルフアイデアソンとは、身の回りに潜む課題への改善アイデアや既存アプリの改善アイデアを「1日」でUIまで落とし込むという個人的な取り組みのことである。

制作日

2018.10 (実作業時間:5時間)

ツール

Sketch

制作者

村田 亘


スマートフォンでのキーワード検索

本アプリでは、キーワード検索の操作性向上を目指すため、リスト型キーワード検索UIを提案します。 スマートフォンでのキーワード検索では、「入力が長くなると全体が見えなくなる」や「キーワード編集時、カーソル移動が大変」、「そもそもカーソルを合わせるのが難しい」など、 課題点がとても多いです。 これらの課題の原因は、PCでの検索と同じフォーマットを採用していることが原因だと考えられます。 PCの場合、マウス操作であるため、カーソル操作が基本です。そのため、検索窓内でのカーソル移動も負荷なく行うことができます。 しかし、スマートフォンでは、入力媒体(マウスなど)を介さず、直せず指で操作するため、カーソルを必要としません。 むしろ、タップ時に画面(検索窓)の一部を隠す形になり、カーソル操作は不向きだと言えます。 これらを考慮すると、PCとスマートフォンでは、操作性が大きく異なるため、それぞれに適したインターフェースを用意する必要があります。 本アプリでは、リスト形式を取ることでキーワード単位の編集・削除などの操作を容易にします。

リスト型キーワード検索

リスト型キーワード検索は、各キーワードをリストの要素として表示し、キーワードを追加するごとにリストに追加されていきます。


リストで表示するメリットは大きく3つあります。


1つ目は、キーワードが多くなった際にもスクロールで素早く全体を確認できる点です。 スマートフォンの基本操作であるスクロールは、縦長の画面で大量の要素を表示・閲覧するのに最も適した操作方法です。 キーワードが多く画面から隠れてしまった場合でも、スクロール操作を用いることで素早くキーワードを確認することができます。

2つ目は、ワンタップで削除可能な点です。 従来のキーワード検索で、あるキーワードを削除したいとなった場合、 キーワード末尾にカーソルを合わせ、削除キーを文字数回押すという操作が必要でした。 リスト型キーワードでは、キーワードごとに要素が分かれているため、キーワード単位の削除は、要素の右端にある削除ボタンを一度タップするだけでキーワードを削除することができます。 もちろん、要素内の一部を修正する場合は、従来通りカーソル操作を用いて編集することも可能です。 この時のカーソル操作は、1キーワード内でのカーソル移動のみとなるため、大幅なカーソル移動をするシチュエーションは限りなく少なく、許容できる範囲だと言えます。


3つ目は、簡単にキーワードの順番を入れ替えられる点です。 キーワード検索では、キーワードの順番によって検索結果が異なります。 そのため、キーワードの順番を入れ替える操作が稀に発生しますが、従来のキーワード検索では、順番の入れ替えは簡単にはできず、部分的に削除して入力し直すか、全て削除して入力し直す必要があります。 リスト型キーワード検索では、リストの要素をタップしたまま移動することができるため、削除することなく順番を入れ替えることができます。

サジェストの表示

キーワード検索では、入力途中に検索候補を表示してくれる「サジェスト機能」が存在します。 一部分の入力だけで、望み検索を実現するサジェスト機能は大変素晴らしい機能です。 従来のキーワード検索では、検索窓の直下に表示されることが多かったサジェストですが、リスト型キーワード検索では、検索窓を持たず、リストで画面の大半を埋め尽くすため、従来のような表示方法は難しいです。 今回は、サジェスト機能をキーボード上部に配置することで、画面占領率を抑えつつサジェスト機能を利用できるようなUIにしました。 これにより、場合によっては、サジェストをタップするだけで簡単にキーワード検索をすることが可能になります。

OTHER WORKS