タグ

UIに関するcnomiyaのブックマーク (46)

  • アフォーダンスからシグニファイアへ - A Successful Failure

    2012年02月13日 アフォーダンスからシグニファイアへ Tweet D.A.ノーマンが『誰のためのデザイン? 』で紹介した概念、アフォーダンス(affordance)は、UIデザインにおける基的な考え方として受け入れられてきた。UIに関する書籍を紐解けば、アフォーダンスに関する解説を見つけることができるだろう。率直に言ってアフォーダンスの考え方を知らないUI屋、デザイナーはもぐりと看做してよい。 デザイン界におけるアフォーダンス デザイン界においてアフォーダンスは、製品などのモノが、どのように扱われるべきか、どのような性質を持つものかが、ユーザに一目でわかるように付与された(主に)視覚的なサインの意味で使われる。わかり易い例を挙げると、アフォーダンスとは、踏んでは倒せないノコノコにトゲを付けるようなこと、と説明されている(下図)。トゲゾーはトゲという視覚的なサインによって、踏んではい

    cnomiya
    cnomiya 2013/10/25
    シグニファイア、シグニファイア、シグニファイア|これで覚えたかな?
  • 「8段階のステップ」で進行した、Mac版Evernoteのリニューアル

    「ユーザーインタフェースの変更はなぜ必要で、どのような考えに基づいて、どのようなプロセスで実行されたのか」。各種サービスの開発に携わる人に興味深いテーマのセッションが、2013年5月25日に行われた。セッションの機会を設けたのは、MaciPhone周りの開発者コミュニティによる「第4回 iphone_dev_jp 東京iPhone/Mac勉強会」。題材は、2012年11月にリニューアルされたMacEvernoteEvernote 5 for Mac)。講師は、同サービスのUIのリニューアルを指揮したジャック・ハーシュ氏である(写真1)。 ハーシュ氏の講演の内容は、リニューアルのプロセスを8つのステップにまとめ、それぞれのステップで何を考え、何をルールとして実行していったのか説明していくというもの。実際の手書きラフスケッチや参照画面が散りばめられており、簡単に理解・実行しやすくまとめら

    「8段階のステップ」で進行した、Mac版Evernoteのリニューアル
    cnomiya
    cnomiya 2013/06/05
    思ってたんと違う。が、良い勘違い|GTDのナチュラルプランニング的か?|最初の方、重要|1.目標設定→2.コンセプト→3.デザイン→4.相互作用→5.実装→6.発表→7.製品ローンチ→8.繰り返し
  • http://oalp.org/doc/nilesen/

    For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.

  • スマホのUI考2 〜 フィードバックについて | fladdict

    UIについて徒然と考える自分用メモ、2回目はフィードバック。ユーザーに「何かがおきたよ!」と如何に明解に知らせるか?1回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは? ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、

  • 考察:Appleはスマホサイトを作らない。

    今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう

  • Pttrns — Mobile User Interface Patterns

    Stay ahead of the curve and become a better interface designer. With a Pttrns membership, gain access to thousands of curated mobile design patterns, get online advice, and connect with other designers from all over the world. What you get UX and UI Patterns Learn and follow industry best practices that can be applied to your app to help ensure the best user experience possible. App database Save

    Pttrns — Mobile User Interface Patterns
  • Sencha.com

    cnomiya
    cnomiya 2011/02/15
    このバリデーションエラーの表示は良いなぁ|エラー発生は文字列じゃなくアイコンのみ。詳細はマウスオーバーで=省スペース|ステータスバーが良い→フォーカス移動可能&エラー内容がわかる。
  • プログラマのためのUXチートシート — ありえるえりあ

    はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ

  • WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」:phpspot開発日誌

    WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」 2010年11月25日- jquery.dynatree.js | jQuery Plugins WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」。 次のように、デザインそっくりのUIが比較的簡単に実現できます。 スキンに対応していて、次のように、Vistaっぽくすることも可能 アイコンを付けてより分かりやすくすることもできます。 ドラッグ&ドロップも出来たりします。移動している最中のUIWindowsアプリそっくり 各ツリーはAjaxに対応していて、読み込み時に全部読む必要がなく、巨大なツリーを表示することにも対応しています。 Windowsアプリなんかでは何かと便利なこのUIですが

    cnomiya
    cnomiya 2010/11/26
    よさげ|ただ、ツリーから何らかの情報を得る方法が、$("#tree").dynatree("getActiveNode") のような書き方ってどうなの?これって,普通なん?
  • UXデザイナのためのレイアウトと見栄えについてのアドバイス

    原文(投稿日:2010/11/12)へのリンク Shane Morris氏はMicrosoftUXのエバンジェリストを務め、今は独立してUXのアーキテクトとして活躍している。氏はTechEd Australia 2010で“Pimp My App”と題したセッションを行った。このセッションで氏はUXの始める前に知っておく必要のある5つのこと、良いレイアウトを作成する4つのステップ、そして製品を素晴らしく見せるための方法についての6つのヒントを紹介した。 氏はUXの開発は次のステップを踏むべきだと考える。最初に情報の設計を伴う概念の設計を行い、次に操作の設計、そして最後に表示の設計を行う。UXは見てくれの良いページを作成するための技法/科学だと思われているかもしれないが、それはUXの一番最後の部分だ。氏はUXを始める前に知っておくべき5つのことを列挙した。 UXデザインの最初の役割は色やフ

    UXデザイナのためのレイアウトと見栄えについてのアドバイス
  • Frame Box - Lightweight online tool for creating mockups

    Show what you need in 3 easy steps: Sketch frame using UI units Save it and get a link to created frame Send a link to your companion

  • XHTML HTML辞典

    Updated 2013.10.08 / Published 2005.09.12 HTML4.01, XHTML1.0, XHTML1.1の全要素・属性を網羅したリファレンスです。意味や文法をすぐに調べることができるように様々な索引を用意しています。 要素名A-Z索引 HTML4.01, XHTML1.0, XHTML1.1で定義されている全要素型をアルファベット順でリストアップした索引です。 属性名A-Z索引 HTML4.01, XHTML1.0, XHTML1.1で定義されている全属性名をアルファベット順でリストアップした索引です。 要素名の読み方 HTML4.01, XHTML1.0, XHTML1.1で定義されている要素名の発音ガイド(読み方)を掲載しています。 属性名の読み方 HTML4.01, XHTML1.0, XHTML1.1で定義されている属性名の発音ガイド(読み方)を

    XHTML HTML辞典
  • pForm - Free HTML Form Builder - Create Web Form Template Online

    Create HTML Form in Seconds. Choose a color to start:

    cnomiya
    cnomiya 2010/08/09
    フォームジェネレータ|これをエンドユーザコンピューティング(古っ!)に昇華したい
  • iScroll – Matteo Spinelli's Cubiq.org

    The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until now. This script has been superseded by iScroll 4. This page is kept for historical reasons. Get the Script Screencast Live Demo Publi

    cnomiya
    cnomiya 2010/06/18
    ヘッダとフッタを残してスクロール可能にするJSライブラリ| so <li><a href="#" onclick="..." />text</a></li> is a waste of tags. You could remove the anchor and place the click event directly into the LI tag.
  • 認知的ウォークスルー: DESIGN IT! w/LOVE

    不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 認知的ウォークスルーは、ユーザビリティ・インスペクション(ユーザビリティ評価)の手法の1つで、テストルームで行うユーザビリティテストなどとは異なり、実際のユーザーを使わずに専門家による分析的評価を行う方法です。 認知的ウォークスルーとはウォークスルーとは、芝居の立ち稽古のことで、衣装や舞台装置を使わなず普段着で台を片手に行う稽古を指します。 認知的ウォークスルーも同じように、事前にマニュアルを読んだりトレーニングを受けたりすることなく、使いながら操作を理解していく際の認知モデルである探査学習理論に基づき、ユーザーが実行するタスクの各プロセスごとに、以下の4つの探査学習ステップをそれぞれ評価していきます。 目標設定:ユーザーはいま何をするかを設定する探査:ユーザーは目の前の

    cnomiya
    cnomiya 2010/06/10
    なんか俺たちでも出来そうな感じがする。|ついに『誰のためのデザイン?』を読む時が来た!
  • Webサイトランキング | Gomez -Webサイトランキング・評価・構築サービス-

    Webサイトのつくりおよび提供される商品やサービスの質などが、ユーザーにとっていかに有益かという視点で、ゴメスのアナリストが業種ごとに選定した数百の調査項目に基づき調査し評価しています。 IRサイトランキング2023 このランキングは、2023年10月1日までの各社サイトの情報をもとに評価をしています。全上場企業のIRサイトの中から、主要項目調査で一定基準を満たした384社のうち、総合得点6.00点以上を優秀企業として選出しております。 2023年12月21日 ESGサイトランキング2023 このランキングは、2023年5月2日までの各社サイトの情報をもとに評価をしています。主要項目調査で一定基準を満たした182社のうち、総合得点6.00点以上を優秀企業として選出しております。 2023年8月21日

    Webサイトランキング | Gomez -Webサイトランキング・評価・構築サービス-
  • Webユーザビリティランキング 企業サイト編|トライベック・ストラテジー

    トライベックでは創業以来、独自のユーザビリティ評価プログラムによって国内主要企業のWebサイトの使い勝手を客観的な指標によって評価してきました。 毎年、各業界売上上位の国内主要企業全150社をピックアップし、企業Webサイトを当社専門家が評価・スコアリングを行い、企業のユーザビリティ品質に対する取り組みの実態やトレンドを明らかにする取り組みを行っています。 100点満点でスコアリング 当社実施の各種ユーザーテストやコンサルティングで培われたUI/UX視点の詳細な評価基準。 毎年ユーザー環境・意識やトレンド変化に合わせ評価基準は最新化されます。 全117評価項目 ユーザビリティコンサルタントによる専門家評価を実施。全117評価項目について使い勝手を4段階評価します。当社実施の各種ユーザーテストやコンサルティングで培われたUI/UX視点の詳細な評価基準。 毎年ユーザー環境・意識やトレンド変化に

    Webユーザビリティランキング 企業サイト編|トライベック・ストラテジー
  • ユーザ工学入門 | HCDコラム | HCD-Net

    NHKの受信料」 &nbsp; 先日、久しぶりに熱海の別荘、いや別荘と胸を張れるようなものではなく、中古のマンションという物件なんだが、そこに出かけていった。時々出かけていっては空気の入れ換えや、荷物の... 更新日:2015年5月29日

    ユーザ工学入門 | HCDコラム | HCD-Net
  • 基礎知識|ウェブユーザビリティ向上を支援するWebsite Usability Info

    Webサイト(ホームページ)のユーザビリティを軸に、ユーザーエクスペリエンス、アクセシビリティ、ユーザー中心設計、情報デザインといった話題を扱うサイトです。お仕事にWebサイトを活用したい方、必見です!「マジックナンバー7(±2)」という言葉を聞いたことはありますか?何かを記憶するときに、その数が7つ(プラスマイナス2、つまり5個から9個)までであれば、記憶にとどめやすいという説です。心理学者G.A.ミラー氏が1956年に発表した論文の中で使われた造語ですが、人間が一度に記憶できる要素の限界数を示す基準として、広く知られています。最近では、「7±2」ではなく「4±1」という説もあるようですが...(私自身の記憶力は、この程度かもしれません)。

    cnomiya
    cnomiya 2010/06/04
    Webユーザビリティやアクセシビリティを理解するうえで押さえておきたい基礎知識
  • イベント・コラム | HCD-Net

    モノ中心から、使う人間を中心にしたモノ作りへ 近年、モノからコトのデザインへと言われているように、これからは「モノ」中心ではなく、サービスやプロダクトを使う「人間」を中心にすえて、その要求や、その体験をふまえたモノ作りの重要性が高まってきています。 人間中心設計推進機構は、より使いやすい、より豊かな体験を生むしくみとしての人間中心設計(Human Centered Design)を学ぶ人のために、各種セミナー・イベントや、最新情報の発信を行っています。 HCDとは HCDのプロセスと手法 HCDの課題

    イベント・コラム | HCD-Net