Creating an app with an unusual/quirky UI

Creating an app with an unusual/quirky UI | Tsukutta

Nice to meet you, I'm JoeK3816.

Thank you for your time.

Shopping List App UI

MUS - My Usual Shopping is an iPhone shopping list app that I created.

Typically, shopping list apps use checklists in the following way.

(Markdown-style to-do checklists are represented with ✅)

✅Cabbage

✅Radish

✅Carrot

When creating MUS - My Usual Shopping, I initially intended to adopt this method.

However, I began to feel that something was different from the image in my head.

That's because I had the idea of wanting to place the ✅ on the right side.

But placing ✅ on the left side of items is the general convention and standard format.

Placing it on the right side had the problem of looking awkward.

Why do I want to place it on the right side?

I had in mind that when holding the phone in one hand, the finger cannot reach the ✅ on the left side, making it difficult to operate.

If it's on the right side, it's easy to tap.

I wanted to realize this.

How did I address it?

After thinking about it, I came up with the following solution:

Items with inventory in stock are displayed in green
Items without inventory (or with low inventory) are displayed in red
Make the green and red into buttons that switch when tapped

I thought this would eliminate any awkwardness even if placed on the right side.

And I decided to name this button the "Arcau Button."

The result

As a typical shopping list app, it turned out to be quite an unusual-looking design.

However, since I was able to place the Arcau Button on the right side, it became easier to tap. (I imagine it would be difficult to operate for left-handed users. I would like to improve this aspect.)

Although it's just a button, I proceeded while trying to break away from the fixed concept of checklists, and I'm glad a solution was found.

I would be happy if you could experience the ease of operation.

Thank you for reading to the end.

P.S.: Ver. 1.2.0 has been released. With this update, I improved it so that the Arcau Button can now be placed on the left side as well. Left-handed users or those who prefer the Arcau Button on the left side can switch it from the [Settings] button.

初めまして、JoeK3816と申します。

よろしくお願いいたします。

買い物リスト系アプリのUI

私が作ったMUS - My Usual Shoppingは買い物リスト系のiPhoneアプリです。

通常、買い物リストのアプリは以下のようにチェックリストが使用されています。

(Markdown記法のToDoチェックリストについては✅で表記しています)

✅キャベツ

✅大根

✅にんじん

MUS - My Usual Shoppingを作成するにあたり、当初はこの方式を採用するつもりでいました。

ですが、頭の中のイメージとして何か違うんだよなぁ...と思うようになりました。

というのも、✅を右側に置きたいという考えがあったのです。

でも✅は項目の左側に配置するというのが、一般的な考えであってそれが形式でもあります。

右側に置いてしまうとどうも見栄えが悪いというのも問題点でした。

なぜ右側に配置したいのか?

✅が左側にあると片手で持った時に指が届かない・操作しづらいということが念頭にありました。

右側にあれば容易にタップできます。

これを実現したいと思うようになりました。

どう対処したか?

考えた結果、以下のようにすればいいのではないかと思いつきました。

商品の在庫があるものを緑色とする
商品の在庫がないもの(もしくは少ないもの)を赤色とする
緑色と赤色をボタンにしてタップしたら切り替わるようにする

これなら右側に配置しても違和感はなくなると思いました。

そしてこのボタンを"アルカウボタン"と命名することにしました。

作り上げた結果

一般的な買い物リスト系のアプリとしては随分見た目が風変わりなものになりました。

ですが、アルカウボタンを右側に配置出来たのでタップしやすくなりました。(左利きの方にとっては操作しづらいことと思います。この点については改善を図りたいと思っています。)

ただのボタンですが、チェックリストの固定概念を外していこうと思いながら進めていき解決策が見つかり良かったと思います。

操作のしやすさを実感していただけたら嬉しいです。

最後まで読んでいただきありがとうございました。

追記: Ver.1.2.0を公開しました。このアップデートでアルカウボタンを左側にも配置できるように改善しました。左利きの方またはアルカウボタンは左側の方が良いという方は、[設定] ボタンから切り替えることができます。