UI関連の記事一覧



20150609-ハンバーガーメニューのABテスト-00

スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。



●ハンバーガーメニューのデザインパターン

ハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。(サイトイメージは「グラシン工房」から)

まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。

20150609-ハンバーガーメニューのABテスト-01


次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。

20150609-ハンバーガーメニューのABテスト-02


三本線を線(border)で囲い、ボタンらしく見せるデザインのパターン。

20150609-ハンバーガーメニューのABテスト-03


他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。



●アイコンだけ・文字付き・枠線付き、どれがいいのか?

さて、テストした結果ですが、実際のテストアイコンやサイトデザインは「Do Users Understand Mobile Menu Icons?」をご覧ください。以下のアイコンはイメージです。


さぁ皆さんは以下のどのメニューが一番クリックされたと思いますか?

三本線だけのメニュー・三本線の下に文字でメニュー・三本線を枠線で囲ったメニューです。

20150609-ハンバーガーメニューのABテスト-04 20150609-ハンバーガーメニューのABテスト-05 20150609-ハンバーガーメニューのABテスト-06

記事の続きを読む




楽天Koboのサイト(楽天ブックスの電子書籍のページ)で「あ、これ便利かも…」って機能があったので紹介します。

それは「シリーズまとめ買い機能」です。


どんな機能かを紹介します。

以下の画像は楽天ブックスの電子書籍のコーナーで「アイドルマスター」で検索した結果です。

20141222-楽天Koboでアイドルマスターのコミックを購入-01

画像出典:アイドルマスター の検索結果(楽天ブックス)


コミックでは既に何巻か出版されている場合がありますよね。アイドルマスターのコミックも上の画像の様に何巻か出版されているものがあります。

では、コミックの表紙をクリックして詳細を開いてみます。

すると、商品の詳細ページに「シリーズ商品」という欄があります。

この欄を見ると、REXコミックスの「THE IDOLM@STER」で現在発刊されている3巻分がすべて掲載されています。

この「シリーズ商品」の欄ですべてにチェックを入れて「チェックした商品をかごに入れて買い物を続ける」という黄色のボタンを押すと、カートに一気に入ります。コレは便利!

20141222-楽天Koboでアイドルマスターのコミックを購入-02

画像出典:THE IDOLM@STER(1) - まな - 5591203486080(楽天Kobo電子書籍ストア)

記事の続きを読む



20170717-Android-Lの機能はGalaxyに既にある-12

画像出典:Android L Developer Preview(Android Developers)


Android 5.0になるのかもといわれているAndroid Lですが、LifeHackerでAndroid Lで搭載される予定の新しい機能が紹介されていました。


この記事を読んでみたら、「この機能、既にGalaxy Note 3に搭載されているわ…」というものが多数あったので、紹介します。

記事の続きを読む



はてなブックマークのアプリで「UXの本質について」(underconcept)という記事を読み始めて気になったこと。

それはタイトル直下に「コメントをどうぞ」というコメント欄へのリンクがあることでした。

20140509-ブログのコメント欄-01

「えっ?『コメントをどうぞ』がなぜここにあるの?」


考えてみて下さい。

本文も読み始められないこの段階において『誰がこのリンクを必要』としているのでしょうか?


しばらく考えてもよくわからなかったのですが、自分のブログを見ていて、もしかしたら、こういう考えなのかも…と思って納得したので、その考えを書いてみます。

記事の続きを読む



《対象はWindows 8.1 Update適用OSです》


Windowsを使っているユーザーで、タスクバーを上部に持ってきている人ってある程度いるのではないでしょうか。勝手な想像ですが、Macに触ったことあるユーザーであれば試してみる価値はあるかもしれません(特にWindows 7までは)。

20140416-タスクバー表示-01


先のWindows 8.1 Updateで、モダンアプリ(Windowsストアでインストールできる全画面型のアプリ)を使っていても、タスクバーを表示できる機能が搭載されました。

タスクバーを下にしている人はマウスカーソルを画面下端まで持ってくると、タスクバーが表示されます。


ではタスクバーを上にしている人はどうなのか。

記事の続きを読む



20140409-Windows81-Update-01

ということで4月9日の午前4時頃からWindows 8.1 UpdateというWindows 8.1からUpdateするプログラムが配布され始めました。いつものセキュリティー改善・ドライバーアップデートなどのWindows Updateと違って、OSの動作が色々変わるアップデート(更新)です。

ScreenClip


4月9日の朝に早速インストールしてみました。

再起動を含めたインストールが終わるまでの時間はダウンロードの時間を除けば大体20分でした。通常のWindows Updateの様な更新も他に含まれていたので、こんなもんでしょう。

記事の続きを読む



All Aboutのページを見ていて、ナビゲーションのリンクを間違ってクリックしてしまったので、紹介する。

見ていたページは「PGPで暗号化メールを送るには」(All About)と言うページだ。

20140322-All-About-ナビゲーション-01

ページの後半にクリックを間違ってしまったナビゲーションがある。


記事の続きを読む



20121125-Microsoft-Community-質問フォーム-00

みなさん、コミュニティ(掲示板・フォーラムとも呼ばれます)を利用していますか?


コミュニティを運営する上で、できれば避けたいのが「よくわからないタイトルの書き込み」そして「ほとんど同じ質問が書き込まれること」です。

私はコミュニティを昔から運営しているワケではないですが、会社でDTP・印刷関連の掲示板の過去ログを掲載するサイトを作っていて、これは特に感じました。そして掲示板でもよくいわれていることです。

  • タイトルを付けないで書き込む
  • タイトルを読んだだけでは何が何だかわからない
  • 前にも同じ質問があった

これを少しでも解消できると、掲示板・コミュニティを運営する側、利用する側で、素早い回答と的確な回答、そして迅速な解決ができるようになり、よりよい体験ができるようになると考えています。



Microsoftのコミュニティのページを利用していたら、ちょっとこれはいいな、と思ったUI(ユーザーインターフェイス)になっていたので、紹介します。

記事の続きを読む



PSCS6

Photoshopの「ツールパネル」って右側にも配置できるのですね。


普通のPhotoshopでは左側に配置してあります。(画面はPhotoshop CS6です)
20120912-Photoshop-ワークスペース-02


右側にツールパネルを配置してみたら、画面が広く感じました。
作業領域のピクセル数は同じなのですが、気のせい?
20120912-Photoshop-ワークスペース-01

どうですか?


左側に何もないだけで、コンテンツ(作業ドキュメント)に集中できる気がしませんか?
(左側にツールパネルを置くと視線が左右に分散するからだと思っています)


しばらくこの形で試してみたいと思います。


それでは。

記事の続きを読む



20120622-mixi-つぶやき-取り消し-00

今回はmixiアプリのダイアログのUIがわかりづらいというお話です。


mixiにはTwitterのような機能でmixiボイスというものがあります。
このmixiボイスでつぶやきを削除しようと思ってiPhoneアプリで左下のゴミ箱のアイコンをタップしました。


みなさんは以下の画像を見てmixiボイスのつぶやきを削除するのはどちらかわかりますか?
20120622-mixi-つぶやき-取り消し-01


記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索