タグ

userinterfaceとdesignに関するkenjiro_nのブックマーク (21)

  • 「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ

    2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない!」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが当に望んでいることは異なります。「UXデザインUXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less

    「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
    kenjiro_n
    kenjiro_n 2022/09/15
    中盤以降のFigmaを用いたユーザーの発言リストの整理の話が興味深い。このFigmaの使い方と同じようなことが出来るWebサービスはあるんだろうか。
  • 「なんで明朝体にした!言え!」新駅・高輪ゲートウェイ駅の案内板のデザイン、あまりのアレさに「なんでこんなことに?」と話題に

    NHKニュース @nhk_news JR山手線で、およそ半世紀ぶりの新駅となる「高輪ゲートウェイ」の駅舎が完成し、今月14日の開業を前に内覧会が行われました。特徴の1つが改札内のコンコースで、警備や利用客の案内、それに清掃などを行う自律移動型のロボットが稼働していることです。 www3.nhk.or.jp/news/html/2020… #nhk_news pic.twitter.com/GzjGFbWWBH 2020-03-09 15:08:44 NHKニュース @nhk_news JR山手線で、およそ半世紀ぶりの新駅となる「高輪ゲートウェイ」の駅舎が完成し、今月14日の開業を前に内覧会が行われました。特徴の1つが改札内のコンコースで、警備や利用客の案内、それに清掃などを行う自律移動型のロボットが稼働していることです。 www3.nhk.or.jp/news/html/2020… #nh

    「なんで明朝体にした!言え!」新駅・高輪ゲートウェイ駅の案内板のデザイン、あまりのアレさに「なんでこんなことに?」と話題に
    kenjiro_n
    kenjiro_n 2020/03/10
    にしても俺はタイトルの元ネタをたまたま知っていたからいいんだけど、いつもtwitterでよく見るクリエイター界隈の常識の押し付けが一層ひどく見えてしまうのはまとめた人はどう思っているんでしょうか。
  • 入力時間11%減!書きやすいエディタのUIデザイン - クックパッド開発者ブログ

    こんにちは、投稿開発部の佐野大河(@sn_taiga)です。 先日、クックパッドのiOSアプリでレシピのエディタ画面をリニューアルしました。今日はそのUIデザインの設計についてお話します。 方針は「簡素化」 エディタ画面は、レシピを考えて記録・投稿する人にとって重要な機能の一つです。レシピには材料や作り方、料理写真、タイトル、紹介文などさまざまな項目があり、頭の中にある料理をこれらの形に落とし込んでいくのはなかなか大変な作業でもあります。なので、レシピを書く際の手間を減らし、ユーザーがストレスなくレシピを書けることを目的に「簡素化」という方針を定め、改善に取り組みました。具体的に行ったことは大きく以下の二つです。 1.入力や編集のステップを少なくする 以前のエディタ 新しいエディタ 以前のレシピエディタはひとつの項目を選択するとモーダルが開き、入力を終えたら元の画面へ戻ってくるウィジェット

    入力時間11%減!書きやすいエディタのUIデザイン - クックパッド開発者ブログ
  • 59分割ヤバイ|深津 貴之 (fladdict)

    こばかなさんと、グリッド分割の話をしてるときに出たネタなのだけど。 グリッドの59分割ヤバイよねぇというお話。 画面を59分割すると、様々な比率で端数がでない。汎用的なグリッド分割できて素敵。個人的にはnoteで図表を描く時は、 ・幅620px ・天地左右マージン15px ・グリッド59分割 10pxを意識すると、色々と便利だと思う。 これ全部、ピクセルパーフェクトに分割できる。 1分割 = 590px grid 2分割 = 290px grid 3分割 = 190px grid 4分割 = 140px grid 5分割 = 110px grid 6分割 = 90px grid 8分割 = 65px grid (厳密には10の倍数でないので△) 10分割 = 50px grid 12分割 = 40px grid 15分割 = 30px grid 20分割 = 20px grid 24分割

    59分割ヤバイ|深津 貴之 (fladdict)
  • これ、実はけっこう深遠な話

    もはや無効なメタファー…というわけでもない書き方は釣りっぽいけど、今30代前半以下のPCユーザーにはフロッピーディスクを実際に見たことがない人達が多いはずで、あのアイコンが「保存のメタファー」として直感的でなくなってるのは確かだと思います。 ただ、検索を虫眼鏡アイコンで、電話を黒電話アイコンで、電気を稲アイコンで表象するのと同じように、ひとたびユーザーの側に「これはこういうもの」という強力な連想が確立・共有されてしまえば、ユーザーが必ずしもその表象されてる実物を知らなくても大きな問題は起きないようにも思います。 そもそも機能アイコンとは何なのかそれより何より、自分が昔から気になってるのは、この保存アイコンに代表される「機能アイコン」の特殊性についてです。多くの人々が感じているように、機能アイコンには意味がわかりにくいものが多い。たとえばWordやExcelだとこんな感じ: https:/

    これ、実はけっこう深遠な話
  • 日本での驚きの体験がツイッターで大きな話題に

    ブログプラットフォームMediumで活躍する​UXデザイナーのマルチン・ヴィハルィが​数週間日を滞在した際、まず目についたのが日で日常的に使われているUI(ユーザーインターフェース)だった。掲示板やボタン、また日人にとって当たり前である日常的な行動、例えば​並んで電車を待つことや飲店で券を買うことなどが、外国から来た人間にとっては驚くべきことだった。 2週間の日滞在中、掲示物からゴミ箱に至るまで、日式の物事への取り組み方について気づいた様々なことをツイッターで配信していった。結果、ツイートのスレッドは300にまで膨れ上がり急速に世界に知られることとなった。 This epic thread of @mwichary‘s observations and surprising moments in Japan, with an emphasis on everyday UIs,

    kenjiro_n
    kenjiro_n 2018/04/10
    Togetterでのエントリは id:entry:361902217
  • サンフランシスコで働くデザイナー、Marcin Wichary氏が訪日して興味を持った300のデザイン

    Marcin Wichary @mwichary First keyboard I interacted with in Japan was already kind of amazing. Mechanical numeric keypad in an ATM! pic.twitter.com/U0bnG3rWui 2018-02-01 16:43:32 Marcin Wichary @mwichary Things that surprised/amazed me about Japan, an ongoing thread. (More likely UI than food, but you know this already.) It’s my first time here. Please comment away and/or point out my cultural in

    サンフランシスコで働くデザイナー、Marcin Wichary氏が訪日して興味を持った300のデザイン
  • 「AndroidはiOSと同じデザインで!」と言われたときの対応案 - Qiita

    はじめに 「AndroidはiOSと同じデザインで!」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ

    「AndroidはiOSと同じデザインで!」と言われたときの対応案 - Qiita
  • キャンセルのキャンセル問題から考えるダイアログデザイン|Goodpatch Blog グッドパッチブログ

    この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……? 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

    キャンセルのキャンセル問題から考えるダイアログデザイン|Goodpatch Blog グッドパッチブログ
  • プログラム画面デザインの保護とマイクロソフトの「バカげた"特許"」について(栗原潔) - エキスパート - Yahoo!ニュース

    今年(2016年)の4月1日における知財関連法の改正としては職務発明関係(これは別途フォローします)と料金値下げ(商標登録料が25%引きになったのが大きいです)等がありますが、もうひとつ忘れてならないものにコンピューターやスマホ上で稼働するプログラムの画面表示のデザインが意匠法によって保護されることになった点があります(厳密では法改正ではなく特許庁の運用の改訂ですが)。 日の意匠法ではコンピュータープログラムは物品ではないため、プログラムの画面表示デザインは直接的には保護されません。しかし、物品(たとえば、スマートフォン)にあらかじめ記録された画像(たとえば、昔のiPhoneのロック解除画面のスライダー)を、その物品の意匠として登録することはできました。そして、今回の運用変更でこの「あらかじめ」の要件がはずれて物品に記録された画像であれば、その物品の意匠として登録可能になります。要はプロ

    プログラム画面デザインの保護とマイクロソフトの「バカげた"特許"」について(栗原潔) - エキスパート - Yahoo!ニュース
  • なぜSuica改札機のタッチする場所は「13度」なのか | ZUU online

    (写真=ZUU online東大教授・山中俊治氏のデザインシンキング JR東日Suica改札機の導入が始まったのは2001年。かれこれ15年近く経ち、自動改札の普及で切符を買う回数は当に激減しました。 昨年ごろから新型のSuica改札機の導入が始まりました。新型機では出口にある液晶部ではなく手前の液晶に残高表示されるようになりましたが、ほんの小さな違いでも自分自身が戸惑うほど、改札でSuicaをかざして残高をちらりと見るという動作が習慣になっているのがよくわかります。 Suica改札機の読み取り部のデザインを担当したのは、著名な工業デザイナーで東京大学教授でもある山中俊治氏です。山中氏が講演、書籍やブログでその開発裏話を紹介したことで、Suica開発機の魅力や工業デザインの醍醐味が多くの人に知れ渡ることになりました。 工業デザインに無知な私も大いに知的刺激を受けたのを思い出します

    なぜSuica改札機のタッチする場所は「13度」なのか | ZUU online
  • 成功したがゆえに崩壊しつつあるiOSのシンプル哲学 - UXエンジニアになりたい人のブログ

    前回こんな記事を書いた。要約すると「戻る」に手が届かねえって話。 同意も多かったのだが、「左端をエッジスワイプで戻る」が実装されている、というコメントを多くもらった。試してみたところ。。。。おお!すごい!たしかに!iOS7からNavigationControllerのデフォルトの挙動として実装されてるらしい*1。 で、これやってみた人いる?なんかやりづらくなかったですか?やりづらかったですよね?やりづらかったことにしましょう。その経緯とそこから広げて色々書いてみようと思うので! 長いですごめんなさい。崩壊の話が聞きたい人は「行き詰まり」から読みましょう。 なぜエッジスワイプはやりづらいのか そもそもスワイプとエッジスワイプの違いはわりと難しい。 スワイプは真ん中辺りにポイントして、上下左右に動かす。エッジスワイプは端にポイントして、内側に動かす。 スワイプとエッジスワイプ このブログに来る

    成功したがゆえに崩壊しつつあるiOSのシンプル哲学 - UXエンジニアになりたい人のブログ
  • エスカレーターはどう見ても階段なのに止まってなければならないなんてアフォーダンスに反するよなあ

    エスカレーターはどう見ても階段なのに止まってなければならないなんてアフォーダンスに反するよなあ 2013-10-23-3 [Design] エスカレーターで歩いて(走って)追い越す人のために片側をあけておく習慣について。 「エスカレーターでは片側を開けず、並んで立つ」を少しずつ浸透させたい (頭ん中) http://www.msng.info/archives/2013/10/escalator.php 非常によく分かります。危ないですよね。啓蒙していきたいところです。とはいえ、苦難の道。 特に駅のエスカレーターは啓蒙では無理かと。あれだけアナウンスしても駆け込み乗車減らないし。 なので、デザインで解決ですね。やはり、一人幅のエスカレーターを増やしていくしかないかと。子供と並ぶ場面も考えて1.5人幅くらいがいいかな。さすがに追い越しできないだろうし。 まあ、そもそも階段なのに止まってなけれ

    エスカレーターはどう見ても階段なのに止まってなければならないなんてアフォーダンスに反するよなあ
  • 第2回 そのデザインはユーザの時間をどう使うか | gihyo.jp

    いくら魅力的なサービスやシステムでも、それを使う時間がないと利用できません。Webサービスやコンテンツ制作者なら、誰でも自分たちのサービスを使ってもらいたいと思うでしょう。しかし、ユーザを惹きつけようとする設計が、時間を多く使うために逆効果を生むことがあるのです。今回は「時間」という観点から、サービスやコンテンツの設計について考えます。 マルチデバイスの時代 マルチデバイスの時代になり、PC、スマートフォン、タブレット、テレビなどネットに接続されたデバイスに囲まれた生活が当然となりつつあります。人によっては複数のデバイスを持ち、連携させながら使うこともあるでしょう。 Webには膨大なコンテンツがあり、必要であればすぐに検索して望みの情報を見つけられます。記事をはじめ動画や音楽ゲーム、さらに書籍の電子化も始まり、実質得られない情報はないと言ってもよいでしょう。しかも私たちは、ネットワークに

    第2回 そのデザインはユーザの時間をどう使うか | gihyo.jp
  • 山中俊治の「デザインの骨格」 » あらためてSuicaの話でもしようか その2

    前回に続いて、SUICA改札機の裏話的開発ストーリーです。 実験は田町の臨時改札口で行うことになりました。二日間の実験でしたが、準備には2ヶ月以上を費やしました。実験なんだから、うまくいかなければやり直せば良いと思うかもしれませんが、実際には、ある程度以上の規模の実験はコストも手間もかかるので、ワンチャンスになることも少なくありません。そう思って、周到に準備することは重要です。 被験者となってくれる人たちに、何時間もつき合わせることはできないので、ひとりづつ約束をとりつけ時間と人数を調整する必要もあるし、記録装置のセッティング、分単位のタイムテーブル、人員の配置とその人たちに配布するマニュアル、その場で実験内容を変更できる実験機の設計と準備など、意外に複雑で大きなイベントになります。 実験では驚くような光景がたくさん見られました。今では考えられないことですが、カードを縦に当てる人、アンテナ

  • asahi.com(朝日新聞社):800系の九州新幹線 「つばめ」の文字、消します - 鉄道 - トラベル

  • NEXCO中日本の折込チラシから驚愕の新事実が... on Twitpic

    NEXCO中日の折込チラシから驚愕の新事実が発覚。あの味のある高速道路専用ゴシックを廃して、ヒラギノに変えるだと?残念無念

    NEXCO中日本の折込チラシから驚愕の新事実が... on Twitpic
  • 赤・青・黄 | レィルウェイライフ

    赤・青・黄と言っても、信号機の話ではない。新幹線の行先方向幕の話である。 都区内パスの旅で、東京駅の300系を眺めた私は、その行先方向幕にも注目していた。 私が幼い頃、東海道新幹線「ひかり」の方向幕は赤地に白字、そして「こだま」の方向幕は青地に白字のものだったと記憶している。ブリキでできたレプリカの小さな方向幕を何枚か買ってもらったことがあったが、その中に「ひかり」や「こだま」のものもあった気がする。家の長押に小さな磁石をセロテープで貼り、そのレプリカの方向幕をとっかえひっかえ付けては遊んでいた思い出がある。 そして、後に開業した東北・上越新幹線の行先方向幕も、当初は赤と青であったと思う。東北の場合は「やまびこ」が赤で「あおば」が青だった。特に「あおば」は、その名前が「あお」から始まるから方向幕も青いんだと、子供心に私は思っていた。上越の場合も「あさひ」は赤であった。これは、一度乗ったこと

    赤・青・黄 | レィルウェイライフ
    kenjiro_n
    kenjiro_n 2010/09/08
    来春全線開業予定の九州新幹線で走る「さくら」はピンク色という話もある。
  • asahi.com(朝日新聞社):手すりクネクネ時代 「直線より安心」病院・学校にも - 社会

    クネットが設置されている湯島天神の男坂=東京都文京区  くねくねした手すりが街なかに増えている。手すりは真っすぐが定番だったが、波形のこの手すり。つえを使うように水平部を支えに階段を下り、斜め部を取っ手のように引っ張りながら上れるため、安定感があり足の負担も少ない。手すりで遊んで滑り落ちる子どもの事故防止や、来校者への配慮から、学校でも導入が広がっている。  くねくねした手すりが街なかに増えている。手すりは真っすぐが定番だったが、波形のこの手すり、つえを使うように水平部を支えに階段を下り、斜め部を取っ手のように引っ張りながら上れるため、安定感があり足の負担も少ない。手すりで遊んで滑り落ちる子どもの事故防止や、来校者への配慮から、学校でも導入が広がっている。  東京都文京区の湯島天神。境内への階段を、お年寄りの夫婦が「あら、珍しい手すりね」「へぇ。つかみやすいんだなあ」と話しながら、一歩一歩

  • 新幹線の出口専用改札にあるモニタの表示がすばらしい

    新幹線の改札口付近にはだいたい 運行状況や発車時刻が表示されるモニタがあるけど、 出口専用改札を見るとちゃんとそれ用の配慮がなされていて これは素晴らしいと思った。 普通、新幹線の運行情報はこんなふうになってる。 どの方面へ向かう列車の情報であるかが記されている。 これから出発する便が表示される。 発車時刻が表示される。 ところが出口ゲートの方はこう。 どの方面から来る列車の情報であるかが記されている。 これから到着する便と、最近到着した便の両方が表示される。すでに到着しているものには「到着済」と表示される。 到着時刻が表示される。 出口ゲートの外側で新幹線の運行情報を見るのは 乗客をお迎えに来た人である可能性が高いので こういう表示にしておくとこんなメリットがありそう。 お迎えに来た人は、相手が「どの方面へ向かっているか」ではなく「どの方面からやって来るか」を意識しているので、どのモニタ

    新幹線の出口専用改札にあるモニタの表示がすばらしい
    kenjiro_n
    kenjiro_n 2010/01/13
    号数を見るに新大阪のようだ。のぞみひかりこだま=黄赤青はトータルコーディネートの一環で列車側面の行先表示に準拠。この色に決定した根拠は知らず。