2018年05月18日

スマホアプリのユーザーインターフェイス(UI)とユーザーエクスペリエンス(UX)

Nardiさんが指摘してますが、Z21が一番良いUI、UXとのことで、DSairのデカいメーターのしょうもないデザインに反省しております。反省しているのに、実は裏で、実験的にスマホに最適化したこんな画面を作ってしまったのでさらに反省しています。

rapp_1.png

裏で何をしていたかというと、スマホに最適化した形で、新たにアプリを構築し直そうと思った次第です。なので、開発プラットフォームも、jQuery UI(PC/タブレット向け)から、Onsen UI(スマホ向け・レスポンシブルデザイン)に切り替えています。

ただ、こちらに最適化しすぎると、PCやタブレットで超使いにくいという問題もあり、ちょっと困ったなあというところです。とりあえずスマホ向けの、実験的アプリと位置づけて開発を並行してやっていこうと思います。

ということで、Z21の画面配置にUIを単純に直してみました。アクセサリ画面は作ってません。また、中身は作り込んでないので、ただの見た目だけです。PCやタブレット向けでは無く、スマホに絞って最適化してます。

_C__SD_WLAN_app_app.html(iPhone 6_7_8).png _C__SD_WLAN_app_app.html(iPhone 6_7_8) (1).png

_C__SD_WLAN_app_app.html(iPhone 6_7_8) (2).png

コレをベースに、意見のある方は画像にポンチ絵を描いたりしていただければと思います。
当方としてのスマホ向けアプリのコンセプトは以下の点としたいと思ってます。

・シンプル&片手で事足りるデザイン
・車両の操作とポイント切替のみにする。レイアウト機能はいれない(現行版の方で対応する方針)
・iPhone6以降の機種をターゲットとする(画面サイズ、互換性的な制約)

たぶん、異論はあると思いますが、OnsenUI自体も、そんなに何でも出来るようなスーパーなUIプラットフォームではないので、かなり機能をそぎ落とした形で、サクッと気軽に動かせる、という点を強調していこうと思います。なので、目標の機能が完成したらStable状態で放置になります。

■追記

CS3や、Z21のような機関車のデータベース登録の処理は今のところ実装しません。1列車の運転のみに絞って、アドレスを打つだけの簡単な物でスマホでの動かし具合を確認します。

スピードメータの付いている現行版は正のままです。
posted by yaasan at 04:39 | Comment(3) | 鉄道模型
この記事へのコメント
(Yaasanが代理投稿&翻訳)


DSairのスマホ・タブレットの画面スタイルをZ21風に変えないでください。
Z21のアイコンは素晴らしいが、コントローラに特定の車両をロードして、ファンクションボタンのアイコンがそれぞれの機能を示すようにする、データベース登録に関連付いています。あなたが持っているメルクリンのCS3もZ21も似たようなコンセプトです。(一部略)

DSairのシステムは、DCCとメルクリンシステムの両方における全てのメーカーの全ての車両をカバーする必要があります。(分かっている限り、アメリカとヨーロッパで大きな販路になっている)。よって、ファンクションボタンF0-F19(28?)をそのままにする必要があります。

そして私はスピードメータが好きです。クルマを運転したことがあるような、ほとんどの大人は理解できます。ゆえに、これはDesktopStationのターゲットになるマーケットです。DSairを使っているとき、スピードメータを手で操作することは、スマホやタブレットの両方でうまくいきます。

誰が変えて欲しいと頼んでいるのでしょうか?その人はDSairを買っていますか?私はDSairを2つ持ってます。そして、私は、DSairを動かしてとても楽しんでいます。


--------------------------------------
PLEASE DO NOT CHANGE to the Z21 format screen on Smartphones or Tablets for DSair.

The icons on Z21 are great, but they relate to a database of loco identifications, so when you load a particular loco into the controller, the correct "F" button icons are show for each function, rather than use the F0 ~F19 number system. You own a Märklin CS3 Central Station, so you know how this works, and the Z21 is a similar concept, when it comes to showing the Function button Icons.

Your DSair system has to be able to cover all loco's from all manufacturers in both DCC and Märklin operating systems (a BIG Selling feature for USA and Europe respectively, as far as I am concerned) so you have to stay with the current F0~F19 buttons, that can be scrolled up and down.

I also prefer the Speedometer, as it is something that most adult males understand, if you have every been in or driven a motor car. After all, this is your target market. And using your finger for control of the speedo, works great on both Smartphone and Tablet, when using DSair.

Have these guy's who are asking for changes, purchased and are using a DSair? I have two DSair units and I am very happy with how they work, as they are.
Posted by Kangaroo John from Down Under at 2018年05月18日 07:45
はやっ!シンプルデザインはじめていたんですか。
DesktopStationはすでに中心に速度メーターがあるのがアイコン的になっているので悪い事ではないと思います。
ただYaasanさんのおっしゃる引き算の哲学はデザインにも当てはまると思います。
私はアップル信者ではありませんがミニマリストのスティーブ・ジョブズの哲学は似た感じで素晴らしいものだと思います。
亡くなられてからの製品はやりすぎだと思いますが。

そして大規模なUIの変更はかならず反対に合いますがいつかやらなければならない事だと思います。
とは言えYaasanさんはUI/UXの専門家ではありません、餅は餅屋と言う事で無理して変更する必要はないと思います。

Johnさんの言う事もごもっともだと思いますが好みの問題は永遠に解決する事はできません。
たくさんの意見を取り入れて平均値を求めるのが正解かと言うとそれも違います。
デザインはそう単純なものではありません。
現代デザインのはじまりは約100年前のエル・リシツキーの「声のために」と言う詩集が有名ですが識字率の低い時代だからこそ生まれたデザインでもあります。
識字率もあがり情報もあふれた現代において新しいものを生み出すのはなかなか難しいことです。
と言うわけですでに製品として実績のあるZ21を真似る事はデザインを学ぶ上で第一歩だと思います。
などと書いていると長くなるのでこのへんで!
Posted by Nardi at 2018年05月18日 09:53
UIを設定で切り替えるというのもできると面白いですね。
そのうち有志がつくったUIを複数取り込んで面白いことになったり・・・
Posted by あやのすけ at 2018年05月18日 20:26
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。