フォームの重要性 今回はWebサイトの「使い方」からユーザビリティを改善する方法を探っていきます。 多くのWebサイトでは、ユーザーにフォームから何らかの情報を送信してもらうことが非常に大きな目的となります。ブログやSNSに代表される、ユーザー自身がコンテンツを作成するような場合では、フォームの操作がWebサイトの基本操作となります。また、ECサイトではフォームを操作して、購入のアクションを完了してもらうことが最大の目的です。 一方で、フォームはユーザーに対する負担が非常に大きい部分でもあります。純粋な操作量も多くなりますし、ユーザー自身が何らかの情報を送信するということに対する意識的なハードルもあります。 ですから、フォームのユーザビリティを高め、ユーザーの離脱を少しでも防ぐことはWebサイトを制作・運営する上で非常に重要な課題となります。 今回はそんなフォームのユーザビリティを改善する
第0回 その気になった客を逃さないフォーム設計術 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか? 今木 智隆(株式会社ビービット) ウェブサイトの「ユーザビリティー」という言葉は、当たり前のように耳にする機会が増えてきた。しかし、その知名度の広まりとは裏腹に、「何をどうすれば成果に結びつくのか」「実践に落とし込むにはどうしたらよいのか」について具体的に取り上げられることは少ないようだ。 この連載では、主に「会員登録による顧客獲得を行う企業サイト」をモデルとして、想定される次のようなユーザー
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.
miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト(ラベル)が付けられますが、input要素だけでマークアップした場合、チェックボックス(ラジオボタン)の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ
こんにちは。 コーヒー飲むならマンデリンな ryosuke です。ただ実際の所深いこだわりはありません。 早速ですがFlash Lite は携帯向けという事もあって少なからず制限があります。今回はその辺りを中心に特徴をざくっとまとめてみようと思います。 実装バージョンの普及状況 例によってキャリア毎に制限が異なったりするので Flash Lite の仕様と同時に各キャリアの実装状況を把握する必要があります。 モバイル用のFlashとして登場したFlash Liteですが、現在3キャリアあわせると 1.0/1.1/2.0/3.0/3.1 があります。 1.0はdocomoとSoftbankの端末のいくつかに存在する程度で余り数はありません。auは1.1の実装から提供されています。 普及率やスペック、上位互換性から1.1でパブリッシュされたswfのコンテンツが作りやすく、最も多くのユーザーにリ
こんにちは。kyagi です。先日データセンタ内のサーバ群のうち、なぜか特定の1台だけネットワークの速度が極端に遅いという問題がありました。今回はサーバマシンのネットワーク速度の測定方法と原因についてお話しします。同様のトラブルが発生している方のお役に立てば幸いです。問題解決までの手順としては以下になります。 1. 現在の状態を調べる 2. ハード/ソフト含めて考えられる原因をいくつか挙げる 3. 原因について改善されるまでひとつひとつ検証していく まず現在の NIC の HW 情報とドライバを lspci で調査します。ここでは Broadcom の NetXtreme BCM5722 という NIC を使用していることがわかります。 # lspci -vvv | grep Ether 01:00.0 Ethernet controller: Broadcom Corporation
なでしこの作者じゃない方のsakatokuです。 以前書いた「Python開発環境を整えよう」という記事からだいぶ時間が経ってしまったので、内容を更新したいなぁと思っていたのですが、ようやくその機会が来ました。 virtualenvで開発環境をつくる 開発環境をつくるにあたって次のような問題が生じると思います。 root権限がないためにインストールしたいライブラリが使えない 新しいライブラリをインストールしたり、既存のライブラリをアップグレードすることで、既に動いているアプリケーションを壊したくない 複数のバージョンのPythonを使って開発、テストを行いたい 自作したPythonパッケージのインストールのテストを行いたい 以前の記事ではvirtual-pythonという解決策を紹介しましたが、現在ではvirtualenvというツールが広く使われるようになってきています。 virtuale
class.upload.phpというライブラリを使って画像のアップロードを実装してみました。今回画像のアップロードで欲しかった機能は下記。 保存する画像名を指定 同名ファイルがあった場合は上書き サムネイル画像も同時に保存 デモページにいろいろな使用例が掲載されています。 サムネイルのリサイズ等はデモページに載ってたので簡単にできたのですが、画像名の指定や上書き設定などは載ってなかったのでソース見ながら設定しました。 <?php require "class.upload.php"; function image_upload($filename){ $image_file = $_FILES['image_file']; $handle = new Upload($_FILES['image_file']); $upload_dir = "/home/user/files/"; if(
Home > Index > Google Apps / Google App Engine とは独自ドメインが使える無料のメール&ホームページサービスでもある Google Apps とは... googleによる説明 ブラウザで使用できる安全なコミュニケーションとコラボレーションのツールを活用して、企業、教育機関、グループの生産性を高め、重要な業務に時間とコストを集中できます。 ですが、個人事業主や小規模企業にとっては、 独自ドメインが使える無料のメール&ホームページサービスと考えることもできます。 独自ドメインが使える無料のメール&ホームページ構築方法 独自ドメインを使って無料のメール&ホームページ構築するには・・・ 新しくドメインを取得して(その際Google経由で申し込む場合)GoogleAppsで使う方法 既存の取得済みドメインを使う方法 があります。 前者(新しくドメインを取
UMLには(1)システムの静的な側面を示す図,(2)システムの動きを説明する図,(3)システムの構成などを説明する図があり,システムをさまざまな視点から分析し,その結果を図示することができる。今回は,クラス図,ユース・ケース図,ステート・チャート図などのUMLの全図の表記法を説明する。説明するのは図記号や矢印の意味などの表記上のルールで,難しい理屈は無い。限られたページ数で細かい表記ルールまでは説明できないが,簡単な図を読んだり書いたりするには今回説明したことだけで十分である。 システム設計書やプログラム設計書の表記法として有効なUML(Unified Modeling Language)*を初心者向けに解説するセミナーの第2回である。前回は,UMLの基盤であるオブジェクト指向*の考え方と,それがUMLの9種類の図で表記できることを説明した。今回は,それぞれの図の役割と基本的な書き方を説明
プログラミングできない元請けがプログラム設計書をレビューするという矛盾 - yvsu pron. yas その「プログラム設計書」が何を指してるのかわからないから土壇場で混乱する - @katzchang.contexts 下のリンクより: *1:「ほとんどプログラムと対応するようなロジックが記述されているようなもの」と言われても、俺としては「よくわからない、見せてほしい」と聞きたいところです。 ひがさんの趣旨と合っているかはわかりませんが、たとえば私が開発中*1のプログラミング言語Diksamのコンパイラには、以下のような関数があります。関数の引数の型チェックのための関数です。 http://kmaebashi.com/programmer/devlang/diksam_src_0_2/S/11.html#68 dkc_compare_parameter(ParameterList *p
「仕様書」は,設計者とプログラマをつなぐ重要なコミュニケーション・ツールだ。それゆえ,安易な書き方をすると問題を起こす。よく議論されるのは,「仕様書の内容はどこまで詳しく書くのが適当か?」という点だろう。過剰品質を避け,効率的に書きたいところだが,きちんと意図が伝わることが大前提である。二つの実例を通して,そのキー・ポイントを紹介する。 今回から,題材を「仕様書」に移して設計書作成の心得を紹介していこう。 前回までは,ユーザーからの要望聴取を基に作成する基本設計書を題材として,設計者とユーザーとのコミュニケーションを軸に展開してきた。これに対し,今回から取り上げる「仕様書」は,基本設計書を基にシステムを実装するプログラマやSEに対して,より具体的なシステムの詳細を伝える設計書である(図1)。 このような設計書は「詳細設計書」や「プログラム仕様書」など,様々な名前で呼ばれていることと思う。ま
These examples demonstrate the basic effect of jQuery Masonry. $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); itemSelector is specified to rearrange all box elements, including the ones inside another div. <div id="primary" class="wrap"> <div class="box col2">...</div> <div class="box col1">...</div> <div class="box col1">...</div> <div class="box col3">...</div> <div> <div c
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. It’s already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons. Calls to action are critical for any website, and a co
Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel. Note: Demo works best in Safari 4.x and Chrome and, um, not so much in Firefox 3.5. This Is How We Do It Using CSS animations in Safari, we're able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome. Don't see the radioactive above? Be sure you're in Safari befo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く