縁の下のUIデザイン―少しの工夫で大きな改善!

第13回 保存のデザインの使い分け―「自動保存」「行ごとに保存」「すべて保存」

この記事を読むのに必要な時間:およそ 2 分

管理画面や設定画面,ツールなど一連の行程を終えたときの「保存」は重要なアクションです。保存するアクションのアイコンに「フロッピーディスク」が使われていることが,概念に齟齬そごが出ているということで時折話題になります。

「保存」の概念は,技術やデバイスの変化に伴いユーザー体験に合わせた形で多様化しました。そして,UI デザインもそれに合わせて選択が求められています。今回は多様化する「保存」にどう適切なUI デザインをしていくかに焦点を当ててみます。

さまざまな保存のUI

保存というアクションは,ただ「保存ボタンを押す」ということではありません。1つのサービスの中でもさまざまな使い方をします。筆者や多くの開発者が利用するメッセンジャーアプリSlackの設定画面には,3つのタイプの保存のUIが使い分けられています図1)⁠

図1 Slackの設定画面(macOSアプリケーション)

図1 Slackの設定画面(macOSアプリケーション)

(a)はメッセージの形状を選択するUI ですが,ラジオボタンを変更すると「saved!」というメッセージが表示され,保存ボタンなしで保存されたことがわかります。

(b)は言語を選択するUI です。プルダウンを別の言語に変更しようとすると,確認のためのダイアログが出るようになっています。仮に(a)のように自動的に保存されると,インタフェースの言語が別のものに切り替わってしまい,万が一誤操作であった場合にユーザーは意味がわからなくなってしまうリスクがあります。

(c)はプロフィールを設定する画面です。(a)(b)に関しては項目ごとに保存がありましたが,(c)はまとめて行います。⁠Full name」「Display name」など一通りの情報を入力してまとめて内容を確認して保存できます。

一覧編集画面での実践事例

図2は,会社のスタッフを管理をするための一覧編集画面で,今回の解説用にサンプルとして作ったものです。図1のSlackでの事例も踏まえたうえで,どういった保存のUIが最適か検証してみます。下記の筆者なりの解説を読む前に,自分だったら(a)(b)(c)どのUIを実装するか考えてみることで,より理解が深まります。

図2 スタッフ管理のための一覧編集画面

図2 スタッフ管理のための一覧編集画面

(a)自動保存

自動保存の利点は,保存のし忘れを防げることです。PCなどでの作業中,何らかの理由でデータが消えるリスクを防ぐことができます。一方で,慎重な変更には向きません。よく考えて保存すべき内容がすぐに書き換えられてしまうからです。

今回のこの画面は,スタッフの名前やメールアドレス,報酬などスタッフにとっての大事な情報が記載されているため,内容に慎重さが求められます。したがって,自動保存には向いていないと筆者は思っています。

自動保存のメリットとして「データが消えるリスクを防ぐことができる」ことを挙げました。これにより,ドキュメントの作成や画像編集時の誤操作によって作業時間が台なしになってしまうことがなくなりました。筆者もこの原稿を書いているエディタは自動保存です。また,普段UIデザインを作るときに利用するツール,SketchやFigmaも自動保存のため安心して作業ができます。自動保存する場合でも,保存されたことをユーザーに伝えてあげることをお勧めします図3)⁠

図3 Figmaで保存のショートカットを入力したときのメッセージ

図3 Figmaで保存のショートカットを入力したときのメッセージ

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/