[B! UI] ume-yのブックマーク

Googleが開発したPythonのUIフレームワーク「Mesop」の特徴を開発チームが解説

Googleのチームが開発したPython用のUIフレームワーク﹁Mesop﹂の特徴や使い方について、開発チームがブログに投稿しています。 Why Mesop? - Mesop https://google.github.io/mesop/blog/2024/05/13/why-mesop/ 多くのPython用UIフレームワークは簡単に使い始められるものの、標準的な使用方法を超えてカスタマイズを行おうとするとJavaScriptやCSS、HTMLの詳しい知識が必要です。MesopはPython内で動作を完結させることでよりPython開発者にとって扱いやすいUIフレームワークになっています。 MesopはコンポーネントベースのUIフレームワークで、UI全体がコンポーネントと呼ばれるブロックを積み重ねて作成されています。Pythonの関数を呼び出すのと同じ要領でMesopのコンポーネントを

ume-y 2024/06/11

リンク

ユーザーが迷わないトグルスイッチの使い方 | ベイジのUIラボ

トグルスイッチとは状態のON/OFFを切り替えるためのUIパーツです。選択肢が明確にわかり直感的に操作できるトグルスイッチは、ユーザビリティを高めるための重要な要素です。しかしそのシンプルさゆえに、不適切な使われ方をしているケースを見かけます。トグルスイッチの機能と適切な使用方法を理解し、ポイントをおさえて設計することが大切です。トグルスイッチの定義トグルスイッチはウェブページやアプリケーションのコンポーネントです。同時に選択できない2つのオプションからいずれかを選択し、現在の状態を視覚的に表します。ユーザーがトグルスイッチのON/OFFを切り替えれば、ボタンの操作結果やオプションの変更設定がすぐにシステムに反映されます。一般的に「トグルボタン」や「トグルスイッチ」と呼ばれることが多く、Material Design（※1）では「スイッチ」、Human Interface Guide

ume-y 2023/12/15

リンク

UIから「白」が消える日｜ritar

これは designing plus nine Advent Calendar 19日目の記事です。こんにちは。ritarと申します。今年の10月頃、YouTubeに大きいデザイン変更がありました。アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは﹁アンビエントモード﹂という新機能です。アンビエントモードこのモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。これを見たとき自分は度肝を抜かれました。なんたってUIの領域にコンテンツの色が侵食しているのです。これを踏まえて、最近UIと色について考えたことを、UIデザインの歴史を振り返りながら記していきます。先に要点を言うと、UIはどんどん﹁無色透明﹂になっていくと考えます。これは﹁技術が生活に浸透することによってUIは存在感を減らし

ume-y 2022/12/20

UI
design

リンク

「タッチ入力できないモニター」にマウスを押し当て操作する技術、中国の研究チームが開発

システムは通常のディスプレイとコントローラーで構成される。ここでいうコントローラーとは、市販の光学式マウス、または内部に光学式マウスセンサーを備えたカスタマイズされたワイヤレストークンを指す。コントローラーをディスプレイ上に置くことで、それらの位置と方向をリアルタイムに追跡する。ユーザーはこれらを利用してディスプレイに映るデジタルコンテンツを操作できる。このインタフェースの利点は2つある。1つ目は、タッチスクリーンと非タッチスクリーンのどちらでも動作すること。2つ目は、静電容量式タッチスクリーンベースとは異なり、接地の問題はなく、ユーザーは制御するためにコントローラーをつかみ続ける必要はないこと。さらに光学式マウスは低価格で、他にハードウェアを変更する必要がないためセットアップが容易だ。どのように機能するか説明する。光学式マウスセンサーは高速で低解像度のカメラである。作業面の画像を連

ume-y 2022/05/17

PC初心者ネタの、モニターにマウスを当てて操作しようとするアレが、できるように。

mouse
UI

リンク

やってほしくない緑とオレンジの使い方(カラーUDの話)｜ほうじ | 少数色覚デザイナー

少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を

ume-y 2022/01/11

UI

リンク

UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。１、進めそう感２、戻れそう感３、進めそう＆戻れそう感４、開きそう感（ドロップダウン）５、開きそう感（アコーディオン）６、開きそう感（モーダル１）７、開きそう感（モーダル２）８、カレンダーが開きそう感９、メニューが開きそう感（ハンバーガー）１０、検索できそう感１１、入力できそう感１２、検索できそう＋入力できそう感１３、パスワード入力できそう感１４、パスワード感（強め）１５、間違えた感（エラー）１６、合ってる感（OK）１７、電話かかる感

ume-y 2019/06/13

UI
design

リンク

【CEDEC 2018】明快で軽快！ Nintendo SwitchのUIを触るだけで楽しい理由 - GAME Watch

ume-y 2018/08/24

リンク

フラットデザインのウェブサイトはユーザーの時間を無駄にしブランドを傷つける可能性がある

by Heima ウェブサイトやアプリに用いられる「フラットデザイン」は、モダンですっきりした印象を人に与えます。しかし、コンサルティング会社であるニールセン・ノーマン・グループの調査によって、フラットデザインには、ユーザーに余計な時間を割かせ、決断力を弱める効果があると判明。ボタンなどのナビゲーションがフラットデザインになることで、ユーザーのページ滞在時間は増えるものの、ブランドへの見方がネガティブなものに変わる可能性もあるとのことです。 Flat UI Elements Attract Less Attention and Cause Uncertainty https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ 調査グループは一般のウェブユーザー71人を集め、それぞれのユーザーに9つのウェブ

ume-y 2017/09/07

「ひとはボタンに見えるものしかクリックしない」

リンク

モバイルのUXデザインにおけるベストプラクティス

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。アプリはコンテンツやサービスを提供するための、今日（こんにち）の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための７つのヒントをご紹介します。１. 一つの画面につき、一つの操作ユーザーが情報を取得する際の努力を軽減する皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action（行動喚起）は一つに留めましょう。こうすることで、ユーザーはアプリを理解・

ume-y 2017/01/17

リンク

ハンバーガーメニューと非表示のナビゲーションはUX指標を悪化させる

Webサイトのメインナビゲーションを非表示にすると、発見しやすさはほぼ半減する。その上、タスク達成に時間がかかるようになり、タスクがより難しく感じられるようになる。 Hamburger Menus and Hidden Navigation Hurt UX Metrics by Kara Pernice and Raluca Budiu on June 26, 2016 日本語版2016年9月26日公開非表示のメニュー（ハンバーガーアイコンなど）と、表示されているメニュー（ページトップを横切る形で置かれたリンクなど）について、定量的なユーザビリティテストをおこなったところ、以下のようなことが明らかになった：非表示のナビゲーションは発見されにくい。表示されているあるいは部分的に表示されているナビゲーションよりも。ナビゲーションが非表示だと、ナビゲーションはユーザーから利用されにくくなる

ume-y 2016/09/27

リンク

「Windows10 フォントが汚いので一発変更！」を使う【Windows 10を“7風”に使うワザ7選】

ume-y 2016/05/06

リンク

iPhone に対する不満 - スリープ画面ストーリー - また君か。＠d.hatena

前回︵http://d.hatena.ne.jp/matakimika/20090719#p2︶の不満に関して、おれが考えた脳内 iPhone 開発バックストーリー。ある日の Apple 社、iPhone 開発会議。開発者﹁ウェイクアップ画面についてですが、カレンダーと新着情報表示機能を仮実装してみま…﹂Jobs﹁すざけんなてやんでえべらぼうめ何年うちの釜のメシ食ってんだああｈｒぅｒｇるｒヴｂヴぉ3ｒ？！︵ドガシャーン︶﹂開発者﹁！！﹂Jobs﹁…お前携帯電話知ってる？携帯電話をご存知ですかァ？﹂開発者﹁…？﹂Jobs﹁知ってるかつってんの。知ってるかって訊いてんの﹂開発者﹁知ってます﹂Jobs﹁︵携帯電話を取り出し︶これ便利だよねえ。こう、ポケットから取り出すよね？そんでボタン押すとさ、新着とかすぐわかるの。あー電話あったなーって。メール着てたなーって。わかる？﹂開発

ume-y 2016/02/14

iPhone に対する不満 - スリープ画面ストーリー

リンク

エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type

エンジニアtypeは、各種エンジニアをはじめ「創る人たち」のキャリア形成に役立つ情報を発信する『＠type』のコンテンツです。

ume-y 2015/11/09

UI
UX

リンク

本当に有意義なエラーメッセージを書くには | POSTD

想像してください。あなたは今、オフィスにいます。周りとは仕切られた個別スペースです。今週は、近々新たに展開する予定の製品を紹介するために多くの時間を割いてきました。疲れが溜まり、不機嫌ぎみになっています。今はようやく近づいた週末が待ち遠しくて仕方ありません。しかしその前に、新製品を紹介するホームページがWindows10で正常に動かくかどうかを試してみなければなりません。あなたは問題ないはずだと信じています。あなたが信頼を寄せているMacには、Windowsを問題なく実行できるソフトもインストールされています。ソフトを起動してみると、丁寧にもWindowsがポップアップ通知で可能なアップデートがあることを知らせてくれます。もちろんアップデートを開始するため、あなたは了承します。すると、こんなものを目にするのです。訳‥何かが発生しました。何かが発生。新製品の準備のため期限が迫っ

ume-y 2015/10/01

「そんなことを気にする人がいると真面目に思うのか？なぜこんなアラート（略）を出し、ユーザがやってること（略）を引き止めなきゃいけないんだ？」

リンク

なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？

スマートフォンなどのモバイル端末用UIでよく用いられる﹁三﹂のマークのアイコンは、ハンバーガーのように見えることからアメリカでは﹁ハンバーガー﹂アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、﹁劣った醜い撲滅すべきものである﹂という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが﹁ハンバーガー﹂。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切一般的に普及し

ume-y 2015/08/13

UI
UX

リンク

≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）

スマートフォン対応サイトで右上や左上にある﹁≡﹂こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。︵サイトイメージは﹁グラシン工房﹂から︶まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。三本線を線︵border︶で囲い、ボタンらしく見せるデザインのパターン。他にもいくつかデザイン・表現方法がありますが、それは前に書いた﹁︻Web制作︼スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた﹂の記事をご覧ください。 ●アイコンだけ・文字付

ume-y 2015/06/10

ユーザーはボタンに見えるものしかクリックしないよね。あと昔、「アイコンに『一太郎』って書いてあると分かりやすい」ての読んだことある。

UI

リンク

UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 | アプリマーケティング研究所

UIデザイン時の﹁ユーザーの使いづらい﹂には2パターンある。350万ダウンロードの家計簿アプリ﹁Zaim﹂が教える、UI改善の失敗談。今回は350万ダウンロード突破、家計簿アプリの﹁Zaim﹂さんにお話を伺いました。ユーザーが伸びたタイミングや、UI改善の失敗談など。 ※株式会社Zaim代表取締役閑歳孝子さん。﹁Zaim﹂の近況について﹁Zaim﹂のユーザー数は今どのぐらいですか？閑歳‥ 2011年7月にリリースして、350万ダウンロードを超えています。OSで言うとiOSの方が多いですが、最近はAndroidも伸びています。今も広告費は使っていません。今までに、ユーザーが大きく伸びたタイミングはありますか？閑歳‥ 去年はダウンロード数がグッと伸びた印象があります。2013年の終わり頃から、スマホをみんなが本当につかうようになって、すごく高齢者と若年層が増えました。データ