タグ

uiとwebに関するrydotのブックマーク (8)

  • 実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita

    リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近

    実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
    rydot
    rydot 2017/02/08
  • 奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ

    【追記】Twitterで教えてもらったのですが、13行が改善されて3行になってました。ご対応頂いた市役所のご担当者様、富士通のご担当者様、お疲れ様でした。今後とも、よろしくお願いいたします。【追記終わり】 住民票を郵送で取り寄せようと思って市役所のサイトを見たんですよ。今まで何回も見てるし別に普通のクソみたいな使いづらい行政サイトだなって相変わらず思ってたんです。でもね、あれ、これはおかしいなって、思ったんです。なんかね、変だな~って。それがね、この画像なんですよ。 委任状 – 奈良市 すっごいパンくずなんですよ…パンくずい過ぎてお腹いっぱい。マジで。 僕らの業界ってまぁどの業界でもそうだけど仕事の流儀とか、そういうのあるじゃないですか。使いやすいサイトを作りたい人、ある程度ユーザビリティを犠牲にするけどかっこいいサイトを作る人、でもこれ酷いでしょ。誰もパンくず13段にしろなんて望んでな

    奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ
    rydot
    rydot 2014/03/26
  • 『色を色で見ないで』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、AmebaのSimplogでWEBデザイナーをしているリュウタロウと申します。 以前新卒デザイナー同士の勉強会がありまして、そこでの私の発表内容がすごく好評でした。 以降より多くの人に向けて発信したいと考え、この場をお借りして記事を執筆させて頂く事になりました。 これから綴るのは、デザインの細かいテクニックやハウツーではありません。 様々なジャンルのクリエイティブに通じる、基的なモノの見方、考え方の話です。 「ワタシ、デザインワカラナイワ」 というビジネスパーソンも、普段やっている仕事趣味とリンクさせながら理

    『色を色で見ないで』
  • Webサイトの階層構造:フラットにするか深くするか

    フラットでも深くでも、情報の階層は構造化が可能だ。しかし、両者にはそれぞれ長所と落とし穴がある。 Flat vs. Deep Website Hierarchies by Kathryn Whitenton on November 10, 2013 日語版2014年1月20日公開 Webサイトの階層構造 数ページ以上あるWebサイトはほぼどれも、コンテンツを構造化する何らかの構造を利用している。最も一般的な(そして、理解しやすい)構造はページをカテゴリーごとにグループ化したもので、そこには特徴別のサブグループが伴うことも多い。その結果、コンテンツは最終的に階層構造になるが、こうした構造はほとんどの人には組織や家族、自然界とのインタラクションによっておなじみのものである。 まさにどのようにコンテンツをグループ化すべきかについての決断は、サイトの構造がユーザーの役に立つ(あるいは役に立たない

    Webサイトの階層構造:フラットにするか深くするか
    rydot
    rydot 2014/01/22
  • 「右カラム無視」への対策

    Webユーザーは、情報過負荷へ適応するため、重要でなさそう、あるいは広告のように見えるエリアから注意をそらすように自分たちを訓練してきた。しかし、サイドバーは適切にデザインすれば、コンテンツを発見しやすくし、ユーザビリティをうまく向上させることができる。 Fight Against “Right-Rail Blindness” by Hoa Loranger on October 12, 2013 日語版2013年12月17日公開 残念なことだが、Webサイトクリエイターが右カラム(Webページの右レールとも呼ばれる)を広告の掲載によく使うので、ユーザーはこのエリアをチェックしないように自分たちを訓練してこざるをえなかった。これは右カラムはやめるべきということだろうか。いや、そんなことはない。 ページの右側で消費されるピクセルは利用可能な量のうちの20%程度だが、ピクセルとはコンピュータ

    「右カラム無視」への対策
    rydot
    rydot 2013/12/18
  • Pie In The Sky

    Pie In The Sky Posted by jonoscript under Uncategorized | Tags: Fitts' Law, interactive demos, pie menus, ubiquity, UI math | [143] Comments This blog post is a hands-on experiment. If you have Firefox 3, before you read any further, please go to this page and try out the demo. (Unfortunately, the demo will only work in Firefox 3.0 and later, because it uses some cutting-edge features of the Canva

    Pie In The Sky
    rydot
    rydot 2010/09/09
  • easyGestures - Screenshots

  • 【コラム】シリコンバレー101 (293) MozillaのUIデザイナーがパイ型のコンテキストメニューを提案 | ネット | マイコミジャーナル

    Firefox 3を使っている方は、まずこのページのデモを試してほしい。2つのボックスがあり、上のボックス内でクリックすると1から7までの数字が並んだパイ型のメニュー、下のボックス内ではリスト型のメニューが出てくる。それぞれで"6"を選択するスピードを実感してもらうためのデモだ。 Mozillaのユーザーインタフェース(UI)デザイナーJono DiCarl氏が10月28日に、Webブラウザにおけるパイ型コンテキスト・メニューの可能性をブログで提案した。上記のデモは、その実験1である。 どちらのメニューが"6"を選択しやすかっただろうか。DiCarl氏は、UI操作の効率性を現したフィッツの法則(Fitts’ Law)を挙げて、パイ型の優位性を説いている。 フィッツの法則 T = a+b log2 (D/W + 1) T = ポインターがターゲットまで動くのにかかる時間 D = ポインターの

  • 1