タグ

usabilityに関するCAMUSのブックマーク (37)

  • 母親から学ぶ使いやすいウェブサイトのインターフェース・デザイン

    インターネットが苦手な母親に子どもが使い方を教えるのはほほえましい光景ですがなかなか骨が折れるものです。そんな母親が1人でもウェブサイトを使えるようにデザインすることで、誰にでも使いやすいユーザー・インターフェースを作る方法がまとめられています。 Designing User Interfaces for Your Mother — Design/UX — Medium https://medium.com/design-ux/dd45ec50f7b0 ◆母親のためのインターフェース・デザイン ウェブデザイナーであるトニー・ジャインズさんは、「ちょっとコンピューターのことを見てくれない?いろいろと大丈夫かしら?」とよく母親から不安そうに聞かれるそうです。彼女はインターネットを使いますが、全てを知っている訳ではありません。そこでジャインズさんは世界中に何百万の母親と同じレベルのユーザーがいる

    母親から学ぶ使いやすいウェブサイトのインターフェース・デザイン
    CAMUS
    CAMUS 2013/09/16
    スペック低いPCを購入して節約している気になって、IEを開いては「なんかPCが危険な状態っていわれる!」とおののく方々何だよねぇ、母親世代の人
  • Account Suspended

    Account Suspended This Account has been suspended. Contact your hosting provider for more information.

    CAMUS
    CAMUS 2013/02/18
    色弱の人の目を通して世の中を見る体験ができるシミュレータ。Jpegに対応
  • 第13回 Windows 8を持ち運ぶWindows To Go

    第13回 Windows 8を持ち運ぶWindows To GoWindows 8レボリューション(1/2 ページ) Windows To Goとは、USBメモリやUSBハードディスクにWindows 8やアプリケーションをインストールして出張先や自宅へ持ち運ぶためのテクノロジ。ちょっと借りたPCでUSBブートさせれば、既存のシステムにいっさい手を加えることなく、いつもの環境をすぐに再現できる。 連載目次 「Windows To Go」は、Windows 8のEnterpriseエディションで導入された、新しいWindows OSの実行・運用形態だ。今までのWindows OSは、Windows PEのような一部の例外を除いて、システムの内蔵ディスクにインストールして利用するのが当たり前であった。システムを起動すると、起動するOSを選択するブート・メニューが表示され(OSが複数インストー

    第13回 Windows 8を持ち運ぶWindows To Go
    CAMUS
    CAMUS 2013/01/08
    現地で修正とかするときなんかに便利そうなんだけどシステム要件が結構厳しいな…
  • 第1回 使いやすいメニューはどう作る? ~水平メニュー | gihyo.jp

    「使いやすいメニュー」に必要な3つのこと よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人(ユーザー)ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。 使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである(次の情報に導く)とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。 この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー

    第1回 使いやすいメニューはどう作る? ~水平メニュー | gihyo.jp
    CAMUS
    CAMUS 2010/06/02
  • Hokusai Manga Construction Kit

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    CAMUS
    CAMUS 2008/10/25
    UIもいい感じだし、おもしろいなぁ
  • 視覚障害者のインターネット使用、サイトやベンダーはもっと考慮すべき? | スラド IT

    視覚障害者のインターネット使用はかなりフラストレーションが溜まるものだそうだ(ComputerWorld記事、家/.記事)。例えばマイクロソフトは画面読み取りのツールなどを提供しているが、使い勝手に関する改善の余地は大幅にあるとのこと。単純に画面上の情報が分かるだけでは不十分で、複雑化したウェブページをナビゲートするのは至難の業であることも多いという。記事に対する意見は大半がこの問題を取り上げたことに対する好意的なものだったそうだが、中には「視覚障害者は、糖尿病患者が『砂糖を使うな』と主張できないのと同じで、自分たちのニーズを満たすよう周りに対してそんなに要求出来ないものだという現実を理解すべき」とのコメントもあったそうだ。家ではウェブサイトやソフトウェアメーカーの努力が足りていないのか、それとも視覚障害者は現状を受け入れるしかないのか?と投げかけているが、/.Jの皆様はどのような見解

    CAMUS
    CAMUS 2008/04/21
    あとでもっかい読む
  • 40分でできるホームページ診断 ~最低限クリアしたい40項目のチェックシート | Web担当者Forum

    40分でできるホームページ診断 最低限クリアしたい40項目のチェックシート[訪問者目線編 2008年版] SEO? ユーザビリティの向上? それ以前にしなきゃいけない「サイト作りの基のキ」を、あなたのサイトではちゃんとできているだろうか? 高度な施策に目を向ける前に、最低限クリアしておきたいチェックポイントをまとめてみた。あなたのサイトは何点とれるだろうか? TEXT:編集部 協力:株式会社 環 ウェブサイト作りの基のキSEOやユーザビリティに限らず、キーワード広告、アクセス解析、LPO、リッチインターフェイスなど、サイトの効果をアップさせる手法はさまざまあり、Web担でも詳しく解説してきている。 しかし、そういった施策にコストを割く前に、現状の自社サイトが、訪問者が「あれれ?」とマウスをうろうろさせてしまうような状態になっていないか確認したことがあるだろうか。 そんなあなたのために、

    40分でできるホームページ診断 ~最低限クリアしたい40項目のチェックシート | Web担当者Forum
    CAMUS
    CAMUS 2008/03/18
    ホームページ診断というか…WebPageデザインのチェックシートだよなぁ
  • https://www.openvista.jp/archives/note/257/?257/

  • CSSとJavaScriptで実装するタブ型インターフェイス37選 -noupe | コリス

    noupeのエントリー「37+ Great Ajax, CSS Tab-Based Interfaces」から、CSSJavaScriptで実装するタブ型インターフェイス37選の紹介です。 37+ Great Ajax, CSS Tab-Based Interfaces 自動で切り替わるタブ型インターフェイス Easy Tabs 1.2 - now with autochange Rotating jQuery tabs example Tab Content Script (v 2.1) スライド式のタブ型インターフェイス Sliding Tabs Coda-Slider Perspective Tabs AJAXを使用したタブ型インターフェイス Ajax Tabs Content Script (v 2.1) 閉じることも可能なタブ型インターフェイス Tab Panels Close

    CAMUS
    CAMUS 2008/02/24
    タブ型インターフェース
  • 第30回 JavaScriptの動作を軽くするための工夫:ITpro

    今回はJavaScriptとWebページの表示・操作の体感速度について考えてみます。というのは,JavaScriptのせいでWebページの表示や操作などの速度が遅くなっている,と感じることがあるからです。 現在のWebサイトでは,JavaScriptを使って使い勝手を向上することは,ごく当たり前に行われています。例えば,動的にページを書き換えたり,ページ遷移を行わずにサーバーと通信を行ってデータを取得したりと,JavaScriptを使うことで,Webサイトをより便利に,より使いやすくすることができます。 Ajaxという言葉がはやってから,もう2年以上がたつんですよね。何年か前,JavaScriptはじゃまで,セキュリティを低下させる不要なものだと見なされていた頃がありました。しかしそれから一変して,「JavaScriptをがんがん使ってもいい」という空気になったことで,Webサイトを作成す

    第30回 JavaScriptの動作を軽くするための工夫:ITpro
  • 第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum

    第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか? 今木 智隆(株式会社ビービット) 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ

    第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
  • Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト

    Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト:パターンとライブラリで作るAjaxおいしいレシピ(4)(1/4 ページ) script.aculo.usの一歩進んだテクニック 今回紹介するscript.aculo.usは、以下のような機能を提供するAjax(JavaScript)フレームワークです。 ビジュアルエフェクト ドラッグ&ドロップ DOM操作 オートコンプリート スライダー 単体テスト prototype.jsをベースのライブラリに使用しているので、prototype.jsとともに利用したことがある方も多いのではないでしょうか。 今回はscripot.aculo.usのエフェクト機能に焦点を絞り、より突っ込んだ使い方を紹介していきます。 ■ Ajaxの弱点を補う「エフェクト」の必要性 Ajaxを活用することで、画面全体を再描画せずに画面上の一部分のみを変更し

    Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト
  • 全てのチェックボックスをチェック/解除する - JavaScript

    サンプルと機能 → Sample 1:全てのチェックボックスをチェック/解除する フォームにあるチェックボックスを全てチェック/解除します。 チェックボックスは、name属性で判別します。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:全てのチェックボックスをチェック/解除する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn = new Array("ch1","ch2","ch3","ch4","ch5","ch6"); // 全てのチェックボックをチェックする fu

    CAMUS
    CAMUS 2007/11/21
    あとでつかいそうなので
  • 入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ

    メール送信フォームやらアンケートの回答フォームやら、とにかくネット上には様々なフォームが存在しています。入力する値が間違っていると「エラー」表示を出すタイプのモノが多いですが、出される側から見れば「そんな値を入力できるようにするなよ!」「8文字までしか受け付けないんだったら、最初から入力可能な文字数を8文字に制限しておけよ!」「エラーが出たらどこを再入力すればいいのかわかりやすく表示してくれ!」などと思うこともしばしば。 というわけで、この「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかくいろいろ便利な入力チェック機能を簡単に組み込むことができるオープンソースで開発されているJavaScriptファイルです。入力チェック後のエラー表示もポップアップウインドウやページ内

    入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ
  • moveme.comのエラーメッセージ(というか表現) - SIMPLE*SIMPLE ~ ウェブ職人のための小粋なネタ帳 ~

    引越し支援サイトのmoveme.comのエラーメッセージがちょっと変わっています。 普通エラーがあると赤い文字で「正しく入力してください」とか、フォームの枠が赤くなったりしますが、このサイトではフォーム自体が左右にブルブルと震えてエラーだということを教えてくれます。 ↑ テキストボックス自体が横にブルブル震えますw。 ちょっとかわいいですね。実際の動作は以下からどうぞ。 » moveme.com – the site that makes moving simple

    moveme.comのエラーメッセージ(というか表現) - SIMPLE*SIMPLE ~ ウェブ職人のための小粋なネタ帳 ~
    CAMUS
    CAMUS 2007/07/14
    ぶるぶるする…ウザイかも知れないけど確かに注目はしてしまうなぁ。(^^;)
  • 検索ユーザーの目線はどう動く Yahoo!とGoogleで違い

    アイレップとジャパンマーケットインテリジェンスは6月11日、Yahoo!JAPANとGoogleの検索結果画面を見ている際のユーザーの目線の動きを調べた結果を発表した。Yahoo!は「関連検索ワード」や「Yahoo!カテゴリ」が注目されており、Googleはサイトのタイトルを最初から最後までよく読まれているという傾向が見えた。 測定は昨年9月から10月にかけ、目の網膜に照射した赤外線の反射を利用する専用機器を使い、無作為に選んだ76人(男女半々)を対象に実施した。 それぞれ、画面上部に検索連動広告が表示されている場合と、表示されていない場合に分けて調べた。 Yahoo!検索で広告が表示されていない場合、目線は「逆L字型」に動く。検索結果の上に表示される「関連検索ワード」や「Yahoo!カテゴリ」を見るために目線が右に動き、その後目線が左に戻り、検索結果サイトのタイトル先頭部分を下まで流して

    検索ユーザーの目線はどう動く Yahoo!とGoogleで違い
  • 知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE

    技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo!やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意

    知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
  • ユーザーの目線を考えることの重要性 | ユーザー視点のウェブデザインガイド | Web担当者Forum

    第1回 サイト訪問者の目線で考える 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか? 今木 智隆(株式会社ビービット) ウェブサイトがビジネスとして成功するための要素は、コンセプト・デザインから細かな言葉遣いに至るまでさまざまであるが、その中でも「ユーザーにしっかりと(見てもらうべき)情報を見てもらう」ことは常に重要な要素の1つに挙げられるだろう。 いくらデザイン(見た目)がよく、コンテンツが充実しているサイトであっても、ユーザーは驚くほどすぐにサイトから離脱してしまうことが少なくない。この

    ユーザーの目線を考えることの重要性 | ユーザー視点のウェブデザインガイド | Web担当者Forum
  • どんなパソコンでもタブレットPCにしてしまう『NAVISIS』 | 100SHIKI

    パソコンで絵を描きたい。そうしたときに便利なのがタブレットPC。画面に直接描けるので直感的である。 しかし、すべてのパソコンがそうしたタッチスクリーンに対応しているわけではない。 そこで登場したのがNAVISISである。 このサイトではどんなパソコンの画面でもタッチスクリーンにしてしまう機器を販売している。 仕組みはシンプル。ディスプレイの上に乗せるセンサーと専用のペンによって構成され、ペンで描いた軌跡が無線で送信されるというものだ。 今使っているPCをそのまま使える点が良い。自分が持っているものをもうちょっとだけ便利にするこうした周辺機器は他にも考えてみたいですね。

    どんなパソコンでもタブレットPCにしてしまう『NAVISIS』 | 100SHIKI
    CAMUS
    CAMUS 2007/03/28
    コクヨのmimioのモニタ版?
  • “色”でグッと引きつける!:NBonline(日経ビジネス オンライン)

    カラーリングの基礎は不可欠の知識 「プレゼン資料の配色の重要性に意識が高まってきたのはここ3年ぐらい。まだまだ改善すべき点が多いというのが日の現状です」。こう話すのは、企業のドキュメント資料の企画や設計、制作などを手がけるコドスの矢島隆さんだ。 「パワーポイント」でプレゼン資料を作成することが当たり前となった今、図の配置や文字の流し方などの構成に気を使う人は増えている。だが多くの人はカラーリングまでは学び切れていない。思いつきや個人的な好き嫌いで色を決めてしまうケースは少なくない。