タグ

関連タグで絞り込む (0)

  • 関連タグはありません

タグの絞り込みを解除

UIとuiとwebdesignに関するasiamothのブックマーク (8)

  • 令和時代のページネーションを考える (REST API編) - Sweet Escape

    今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 気で深く考えるというよりざっくり検討したときの話です。 はじめに REST APIを実装するにあたってリスト系のAPIを提供する場合に必須といっても過言ではないのがページネーション。大量のリソースをレスポンスする場合にそれらを一気に返してしまうことは応答速度、転送量、クライアントサイドでの扱いづらさなどなどに繋がるので必須と言える。 最近、新たなAPIを開発するにあたってページネーションをする必要があったこともあり、今回はこのページネーションをどうやって提供するか整理して改めて検討してみた。 前提 TypeScript Nest.js

    令和時代のページネーションを考える (REST API編) - Sweet Escape
    asiamoth
    asiamoth 2022/10/07
    ページ数が多いサイトのページネーション、1ページ進もうと「<< < 3 4 5 > >>」の「>」と「>>」と間違えて何十ページ前が開く問題、もなんとかしてほしい。
  • 今更だけど、ウェブアクセシビリティについてまとめてみた(概要と手法) - Qiita

    NTTコミュニケーションズ Advent Calendar 2018の16日目です。 はじめに PWAネタについて書きたい人生だった。 気づいたらウェブアクセシビリティについて書いていた。 目的 気になって調べてみたら少し知見が溜まったので、メモついでに共有しようかと思い、今回記事にしました。 記事内容 ウェブアクセシビリティ概要 概要 重要性 近年の動向 手法 ヒューマンリーダビリティに関する手法 マシンリーダビリティに関する手法 ウェブアクセシビリティ概要 ウェブアクセシビリティって何? WAICのホームページより抜粋 一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。 ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを意

    今更だけど、ウェブアクセシビリティについてまとめてみた(概要と手法) - Qiita
    asiamoth
    asiamoth 2018/12/16
    ウェブ・アクセシビリティの記事なのに、リンクが「こちら」て……。その時点で そっ閉じ。
  • とあるショッピングサイトの掲示板に見た「使いやすさの原点」について | マミオン有限会社-パソコン・数学研修、法人研修

    BBS(ビービーエス)、またの名を掲示板。 今となっては少しノスタルジックな響きを持った言葉ですが、先日、とあるお店のサイトに設置されていた掲示板を見かけて驚いたとともに、ユーザビリティについて考える機会があったのでご紹介したいと思います。 掲示板上でやりとりされる注文情報… 問題の掲示板は、こちらの「しょうゆ販売店」のサイトに設置されたものです。 書き込みの途中に、商品の注文情報が書かれているのが見つかりますか? (個人情報がそのまま書かれているので、ボカシ入り画像のみでのご紹介です。) これを初めて見たとき、2つの意味で衝撃を受けました。 1つ目は、ここを注文フォームと間違えて書き込みをしてしまう人が存在するということ。 2つ目は、この方法、結構いいんじゃない?ということです。 セキュリティ上はマズいけど… 一般公開されている掲示板に注文情報を書いてしまうというのは、普段からインターネ

    asiamoth
    asiamoth 2012/11/30
    「やたら項目が分かれている」よりも“まるごとフォーム”が便利ですね! シニア向けと限定はせずに、ユーザに選ばせると良さそう。 あと、郵便番号などを「全角の英数字(吐き気」で入力させるサイトは滅ぶべき。
  • Gmailから見るユーザビリティ ~ リンク文言や記号をユーザ視点で考える (ユーザビリティ実践メモ)

    今回は、ウェブメールを題材として、ちょっとした工夫でウェブサイトのユーザビリティをあげるためのコツを取り上げます。 このとき、見ているメールよりも古いメールを読みたいのにも関わらず、「前」をクリックしてしまい、新しいメールへページを送ってしまうのです。もちろん、すぐに気づいて読みたいメールへ移動するのですが、ウェブサイト上ではこのような小さいストレスでも、ユーザの離脱を招きかねません。 この画面の場合、以下の工夫を行うことで、利用の際のストレスを軽減できるでしょう。 1.適切なリンク文言を利用する 2.ユーザの心理状況に応じたメタファー(記号)を利用する ■1点目:適切なリンク文言を利用する 「前」か「次」という文言は、一瞬では古いメール、新しいメールのどちらに移動するのかがわかりません。 ここで、同じGmailの英語版の表現を見てみましょう。(図2参照) 英語版では「newer」、「ol

    asiamoth
    asiamoth 2009/01/14
    ああ、左右ではなく上下で新旧を判断させるのか! なぜ気が付かなかったのだろう。
  • position:fixed大嫌い

    「ウェブアプリケーションのGUI以外にposition:fixedを使わないよーに。」 ウェブログにおいて記事が主役である限り、ナビゲーションにposition:fixedを使うのはreasonableとは言い難い。馬鹿げた縦幅を持つサイトロゴ部分+ナビゲーション部分をスクロールで消して記事を読もうとしたら、そいつらがくっついてくる。こいつは当に頭に来る。かといってそういうサイトをブラウザデフォルトのスタイルシートで閲覧すると、ナビゲーション用の画像がリストとしてズラズラならんでしまって、さらに記事に辿り着くのが面倒になるんだ。まあ仕方ないんだけど、あの「ナビゲーションバー」のどこがUL要素なんだよって言いたくなることがある。 ユーザにとってウェブログはハイパーテキストアプリケーションの一種だ。それを操作するためのグラフィカルなインターフェイスは、ブラウザのボタンなりメニューなりに集約さ

    asiamoth
    asiamoth 2008/09/28
    ウェブログを「ハイパーテキストアプリケーション」と呼ぶ真意を、追記を読んで理解できた。ブログに必要なデザインとは何だろう、と考えるきっかけになった。
  • void GraphicWizardsLair( void ); // 「n-clickを1-clickにすると商売になる。1-clickを0-clickにすると革命になる」

    asiamoth
    asiamoth 2008/09/13
    「0-click」革命について。それよりも、「メモっとく」で 50 ブクマ行くほうが革命じゃね?
  • 2008年 アプリケーションUI・ベスト10

    入選者の多くは、複雑な情報を一つの概要として提供する際にダッシュボード、そしてユーザをダイアログに確実に気付かせるためにはライトボックスを使っている。 また、Office 2007 のリボンの早期採用の著しさは驚きに値する。 Application Design Showcase #1 by Nielsen Norman Group on August 12, 2008 最優秀アプリケーションユーザインターフェイスデザイン・ベスト10、初めてのコンテストの入選者は以下の通り: Campaign Monitor by Eyeblaster (イスラエル): メディア・バイヤー向けの複数の広告キャンペーンを統合管理。 CMSBox by CMSBox (スイス): コンテンツマネジメントシステム。 FotoFlexer by Arbor Labs (アメリカ): フォトエディタ。 PRISMA

    asiamoth
    asiamoth 2008/09/12
    Office は使っていないので「リボン」は知らなかった。単なるタブ?/ ライトボックスはあまり好きではない。閉じるのが面倒だったり。
  • 404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節

    2008年05月20日14:15 カテゴリLightweight Languages javascript - 勝手に添削 - textareaの高さを自動調節 これはなかなかいいですね。 textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました Firefox 2, Safari 3, Opera 9で動作確認してあります。 イチ に 三 function resize_textarea(ev){ //if (ev.keyCode != 13) return; var textarea = ev.target || ev.srcElement; var value = textarea.value; var

    404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節
    asiamoth
    asiamoth 2008/05/20
    入力した行数に合わせて、スムーズに高さ調整するtextarea。/ これ、こんなに短いコードでできるのか!
  • 1