[B! UI] jdashのブックマーク

モバイルではメニューを画面下に表示すべき理由

スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。親指はマウスの代わりデスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ

jdash 2018/09/03

グロナビ的なものを下に保ってくることでCTAボタンとバッティングするのは悩みですな。コンテクストで切り替えれば、まだマシかな。少しスクロールで戻ったらグロナビ表示とか。

リンク

誰もあなたの製品を使いたいと思ってはいない : 製品をデザインするための考え方 | POSTD

毎朝、デザイナーは目が覚めると、喜んで自分の製品に取りかかります。それがデジタル製品であっても物理的な製品であっても、デザイナーは心の中で、人々が自分の製品を使いたがるようになり、楽しんで使うようになると信じているのです。それはやや一般論かもしれません。しかし、私たちはデザイナーとして、自然と自分が取り組んでいる各プロジェクトを最高のものにし、革新的なものにして、そして何より、違いをもたらしたいと考える傾向があります。ああ、私の製品は素晴らしい物になるはずだ。機能やオプション、設定が充実している。みんなが毎日その製品を使い、愛用するようになるだろう。 – あるデザイナーここで少し意外な事実をお教えましょう。人々は製品を使用ことにあまり興味はありません。ユーザがインターフェースを操作したり、つまみを回したり、レバーを引いたり、ボタンをタップしたりするのはすべて時間の無駄です。むしろ

jdash 2016/03/16

制作時に忘れてはならないですね…「画面ではなくプロセスをデザインすること」「個々の部品ではなくシステムをデザインすること」「“使う”ためのデザインではなく、結果を得るためのデザインにすること」

リンク

PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ

スマートフォンの普及で、PCで閲覧するWebサイト︵以下、PCサイト︶に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。表示デバイスの多用化スマートフォンアプリの一般化タッチスクリーンの普及トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景

jdash 2015/02/17

リンク

なぜ Web Components はウェブ開発に革命を起こすのか

ウェブアプリケーションのフロントエンドに関わる方なら、もう Web Components という言葉を全く聴いたことがない方は少ないのではないでしょか。すでに関連記事も数多く出回っており、実際に触り始めている方も多いと思います。しかし、なぜこれが革命的技術なのか、周囲の人に簡潔に説明できる方はどれくらいいるでしょうか？この記事では、それを試みていきたいと思います。デジタル部品の流通革命 # ソフトウェア部品の流通に今、大きな変化が起きてきています。数年前のオープンソース環境を覚えているでしょうか？レポジトリは集中管理型の subversion、リリースは zip、テストは手動。Issue の登録もプロジェクトごとにことなるバグ管理システムが使われていたため、とっつきづらかったでしょうし、パッチを送るのも面倒でした。そんなオープンソースを取り巻く環境が、git やGitH

jdash 2014/05/20

斜め読みですが、CMS…例えばMovableTypeにプラグインを入れて、<mt:HTMLminifier>みたいな新しいMTMLタグができる様なものか。便利でいいじゃん。

web制作

リンク

画面2●ユーザーインタフェースをこれまでのFirefoxから一新

日経クロステック登録会員になると… ・新着が分かるメールマガジンが届く・キーワード登録、連載フォローが便利さらに、有料会員に申し込むとすべての記事が読み放題に！有料会員と登録会員の違い

jdash 2014/03/25

えーーー次のFirefox、Chrome見たいなインターフェイスになっているじゃないの。どういうことなの…。著者はグリモン使っているのね、最近使わないなぁ。 ●Firefox ●ui ●ITpro

リンク

「Windows 8.1 Update 1」の実機動画が公開─メトロアプリをタスクバーにピン留め可能

Microsoftが3月に公開予定のWindows 8.1向け大規模アップデート﹁Update 1﹂の実機動画が公開されました。 THE VERGE経由で先日リークされた﹁Update 1﹂のISOファイルを実際にPCに導入したものとなっています。メトロアプリをタスクバーにピン留めできたり、メトロアプリの上端に黒いバーが表示され最小化や閉じるボタンが追加されるなど、メトロUIとデスクトップUIの親和性が高められているのが特徴です。Windows 8.1 Update 1は2014年3月11日に公開予定と噂されています。情報元‥Youtube 経由‥気になる、記になる

jdash 2014/02/05

マイクロソフトはユーザー多すぎて強い声（ご意見・要望）が色々多いんだろうな。でもModernアプリのタスクバーピン留めは便利かもー。

リンク

TechCrunch | Startup and Technology News

Welcome back to TechCrunch’s Week in Review. This week had two major events from OpenAI and Google. OpenAI’s spring update event saw the reveal of its new model, GPT-4o, which…

jdash 2014/01/08

丸やら四角やらはいいとしても、またアイコンに戻ってるやないかい。タイポグラフィとはなんだったのか。

リンク

ProgressBar(プログレスバー)とUX(追記あり)。 | Junnama Online

ProgressBar(プログレスバー)とUX(追記あり)。公開日 : 2013-12-27 16:37:17 1秒毎に進行して10段階(秒)で終了する処理の進捗をプログレスバーでユーザーにフィードバックする時の話しです。 0から10段階に設定して、1秒毎に1(10%)ずつ進めて行き、10に到達した瞬間に非表示にする(処理終了)という実装をすると、何か違和感がないですか? (以下の動画) プログラマ的には素直な処理の実装なのですが、以下の2点が違和感につながっているように思います。スタート時、バーが0の時、処理が止まっているように見える。終了時、9段階から10段階に到達したとき、10段階に到達した画面が見えずに(一瞬で非表示になるため)、違和感が残る。そこで、以下のように改良します (以下の動画)。敢えて10段階とせずに、9段階とする。 0段階の時と9段階の時に散髪屋状態(bar

jdash 2013/12/31

長時間待たせるものであれば最後の「計算で予測して」が精神衛生上いいけど、MacやWindowsでファイルコピー完了は4096時間後とか見ているちょっとなｗ Ex2がやはり良いね。

UX
ui

リンク

https://cdn.mos.cms.futurecdn.net/3gTTxPJQQ3JxeXzMGtqpuJ.jpg

jdash 2013/10/15

Windows Phone GDR3のタスクスイッチの画面も見えるが、iOS7より×ボタンがあるWP8の方が終了するにあたって分かりやすいな。明確。

リンク

Hub · BootMetro

List of all tile templates: square, wide, widepeek, with images or text only.

jdash 2013/02/06

bootmetroってあるのか！おもしろい。

リンク

2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめ

フラット、サークル、ブラー、ビッグ、ダークなど、2013年のウェブデザインのトレンドを探るかっこいいUIデザインをインスピレーションの宝庫Dribbbleから紹介します。

jdash 2013/01/29

Windows Phone/8のModern UIやVistaのAeroみたいなものもあるんな。革製品の縫ったみたいなデザインは去年で終わりか。iOSでも製品担当者変わったから終わると思うけど。 ●アイコン ●デザイン ●webデザイン ●UI

リンク

サービス終了のお知らせ - NAVER まとめ

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

jdash 2013/01/28

おもしろい。ボタンの形を変える、サイズを変える、押すではなくする、ボタンを一体化する、ボタンを無くす、表現を変えるなど色々アイデアあるな～。いいね。こういうリデザイン。

リンク

UIの改悪がUXを改善させる場合 - A Successful Failure

2013年01月20日 UIの改悪がUXを改善させる場合 Tweet GoodUI≠GoodUX UIとUXについてはその理解について多くの議論がなされてきた。たとえば、Googleの及川氏は﹁写真が語るUXとUIの違い﹂というエントリにおいてコーンフレークの例を元にUIとUXについて説明したが、その後、ERATOの渡邊氏が﹁1分でわかるUIとUXをわかりやすく説明する写真とお話﹂というエントリにおいて、ATMを例によりわかりやすい説明を挙げている︵次の写真は当該エントリからの引用︶。この例ではたとえUIが素晴らしくても、そのATMは時間がかかるため、長い待ち時間ができ、結果としてUXが損なわれる場合を示している。しかしながら、実際にはATMの劣悪なUIが悪いUXの原因となっている可能性があり、本当にこのATMのUIは素晴らしいのかという疑問が残る。つまり﹁GoodUI ≠ Go

jdash 2013/01/21

『実に88%もの時間を手荷物引渡所でただ立って待つことに費やしていたのである。これが乗客の不満を増幅』何もないと不満が高まる。待っている間にアトラクションでもあればいいか。極端な話、TVでも良い気がする。

リンク

Microsoft の設計原則 - Windows app development

優れたデザインが生まれる原点 Microsoft の設計原則に従うと、ユーザーを喜ばせるすばらしいストアアプリを作ることができると考えています。アプリの計画を立てるときはこの原則を参考にし、設計と開発で何かの選択をするときにはこの原則に従ってください。モダンデザインについて Microsoft は長らく、多くの分野と製品でテクノロジリーダーでした。最近になって、よりデザインを中心とする変更に着手しました。こうした変更は、強力な基盤、周囲を巻き込むようなワクワクするアイディア、優れた手法を特徴としていて、その他の手法を古臭く感じさせることになります。この変更の考え方が、Microsoft の設計原則になりました。 Microsoft の設計哲学は、すばやく動作し、最小限の入力で済み、新しい情報や更新された情報を自動的に通知する、明瞭で簡潔なアプリ画面で裏付けられています。ユーザーは、

jdash 2012/05/05

MSが考える「Webページにユーザーを集中させる」ために。

リンク

PC

ニュース GIGAスクール端末の利用進むが自治体間「用途格差」広がる、MM総研調べ 2024.02.16

jdash 2011/06/03

完全にWindows Phoneだなぁ。まぁ以前からWindows使っている人的にはWindows Media Centerっぽく感じるんだろうけど。

リンク

selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) :: 5509

セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。サンプルを見てみるトピックス特徴ダウンロード導入方法スタイル拡張表示形式 selectable simpleBox エフェクト透明度プルダウン位置の調整(少し高度な設定) プルダウンの高さカスタマイズ独自のselectボックスに適用させる id、classの引継ぎ日付で使う Callback関数を使う動的にselect要素のDOMを書き換える場合（rebuildメソッド）サンプル更新履歴・追記動作環境特徴 selectボックスの選択ってイライラしないですか？jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。セレクトボックスの鬱

jdash 2010/12/03

なにこれ、selectボックスの形してないじゃんｗすげー！ｗ

リンク

jQueryで作るスライドするローテーションバナー

Posted: 2010.09.15 / Category: javascript / Tag: jQuery ちょっと前まではコーポレートサイトのトップページによくあるローテーションバナー（というかスライドショー？）はFlashで作るのが当たり前でしたが、最近ではjavascriptで作成しているものが増えてきましたね。ということでjQueryを使用してシンプルなスライドタイプのローテーションバナーを作成します。 html+cssの作成 bannerというidを付けたdivにリストでマークアップした表示する画像を入れます。画像は全て同じサイズの方が良いでしょう。ここでは320×213の画像を4枚用意しました。 html <div id="banner"> <ul> <li><a href="img/01.jpg"><img src="img/01.jpg" width="320" h

jdash 2010/11/26

これはわかりやすいスライドローテーションプログラムですね（ちょっと設定が煩雑な感もあるけど）。

リンク

「Bing」の検索リンクが青い理由--マイクロソフトが配色決定の裏側を説明

ラスベガス発--Microsoftは、検索の重要性について、単なる10の青いリンク以上のものであることをたびたび述べている。しかし、少なくともその﹁青色﹂の部分は非常に重要であることが分かった。 Microsoftは最終的に﹁Bing﹂となるものを設計していたとき、膨大な数の色を検証し、ユーザーが最も関心を持つ色は実際に青であることが分かった。もっと具体的に言うと、それはGoogleが使用しているものと非常に近い色合いの青だった。 BingのユーザーエクスペリエンスマネージャーであるPaul Ray氏は米国時間3月16日、複数の色合いの中から特定の青色︵色に詳しい人のために紹介しておくと、﹁#0044CC﹂︶を選ぶことで、広告クリック数の増加やユーザー関与の増大により、年間売上高が8000万ドル増加したという。﹁この青色には、少なくとも8000万ドルの価値があった﹂とRay氏は当地で開催

jdash 2010/03/18

ほー。『ユーザーが最も関心を持つ色は実際に青であることが分かった。もっと具体的に言うと、それはGoogleが使用しているものと非常に近い色合いの青だった。』

リンク

イーバンク銀行のサイトを左右反転したら、三井住友銀行になった - Feel Like A Fallinstar

しばらく前から気づいてはいたのですが、改めて見てみて・・・・うーむ、これはさすがにやりすぎじゃないかって思います。さすが楽天というか、もうなんというか。 ■まずは全体を比べてみる上がイーバンク、下がSMBCです。うーむ、綺麗左右対称・・・せっかくなので、イーバンクの左カラムと右カラムを入れ替えてみます。だいぶ似てきました。ついで、色を緑色にし、バナーをSMBCのものにしてみます。・・・・・︵汗・・・・まぁ、デザインの質が違うので区別がつく人は居ると思うんですが。どうかと思います、ほんと。 ■︵おまけ︶エリアごとに見てみます全部左がイーバンク、右がSMBCです。まずは大メニュー。三井住友銀行のほうがすっきりしているくらいでしょうか、違いは。 ※項目自体が違うのは、サービスが違うので無視してください・・・次がキャンペーンエリアでもって商品一覧小さなアイコ

jdash 2009/09/19

UI指摘はネタとしてはいいんだけど、イーバンクのログインボタンが真ん中にあることと三井が左側にあることに対してのユーザビリティの言及が内のが残念過ぎる。／逆に銀行毎に画面違いすぎるのはアレなんで統一しろ