このエントリーをはてなブックマークに追加

Design UI UX

DailyUIシリーズの第4回です。
前回はこちら
 
第4回のお題は「Calculator」。電卓です。  
私は自称UXプログラマーなので仕様とユーザー体験にフォーカスして調査&手書きでUIを作っていきます。
流れは下記です。

  • 機能が必要な理由考察
  • 機能に必要な要素
  • 理想の体験考察
  • UIの調査(AlexaのThe top 500 sites on the webを中心に)※ 今回は関係なさそう・・・  
  • 私が考える最強のUI

では、やっていきましょう。
 

電卓が必要な理由

人間が暗算できないから・・・
筆算でも間違えるから・・・
 
電卓って人生の中であまり使ってこなかったのですが、いつ使うんだろう?
簡単な計算は暗算だし、ざっくりとした値を出すのなら暗算だし、複数の足し算や掛け算ならスプレッドシートを使ってしまうので、わざわざ電卓を使うタイミングがない・・・。ちょっとした暗算の確認とかかな。

電卓に必要な要素 

必要な要素はこんな感じ

  • 数値0〜9のボタン
  • +, -, *, /, =, .のボタン
  • クリアボタン
  • 計算結果を表示する画面

 
関数電卓だったり、特殊な計算をしたいのであれば、

  • 関数電卓にあるような関数
  • 消費税
  • よく使うかける値、足す値

 
個人的に必須だなと思っているのが、

  • 途中の計算式を表示する枠

これがないと3 * 3 * 3 * 4 * 2とかやったときになにをどう計算したのか思い出せなくないですか?

理想の電卓における体験とは?

見やすい・押しやすい・はやい!
 
計算結果が見やすくて、ボタンが押しやすくて、計算が速ければ良い電卓だと思います。逆は最悪です。

色々な電卓を調査してみた

Webとアプリを色々調べてみました。

【調査対象】

  • Web
    Wolfram Alpha, Web電卓, desmos com, onlinerekenmachine, calculator com, tcsion com, calculator-1 com
     
  • iOSアプリ
    計算機(アップル製), 万能電卓, 計算機+, Calc wear, Photomath, ワリカル, 消費税++, 計算機++, 電卓α

 
電卓アプリ or サービス、思ったよりもいっぱいあった・・・。

色々見てみたのですが、海外のサービスの方が途中計算を表示するものが多いなぁという印象でした。それ以外は特殊な関数を入れない限りは物理電卓を大きく配置を変えるメリットがないのでそんなに大きな差はなかったです。

 
個人的におもしろかったのはスライダーで割引率を変更させるUIで、そんなに割引率を変更させることってあるのか?とも思いましたが、単純に割引率入れるのってボタン押す数が多いので簡略化できているのは良いなと思いました。

 
ワリカル warikaru

 

あと、電卓ではないですが、Wolfram Alphaは好きです。
大学生のときに良く遊んでました。積分とか含め計算・検索できる範囲がすごすぎる。

Wolfram Alpha
 

私が考えた最強の電卓

おまけです。
アプリでも使わないし、Webサービスとして使うこともなさそうなので、ブラウザ拡張に電卓を足すイメージで作成しました。 気をつけた点は下記。

  • 途中式が表示される
  • Macユーザーなので、見慣れているiPhoneアプリに合わせた

DailyUI004
 

ChromeのURL表示する箇所でも計算できるけどね・・・。

レビューお待ちしております!

色々ご意見いただけると嬉しいです。こんな例もあったとかあれば教えてください!

次は第5回です。
(書いたらリンク載せます)

このエントリーをはてなブックマークに追加

© 2018, Udayan28