Interface Design Inspiration - 36 Clean Comment Form designs
The Comment form, is an important part of interface design that usually appears at the end of an article. Comment Form should have appealing typography, ordered element placement (name, e-mail, etc.), colors which induces the reader to comment. Here are some samples of clean comment forms collected from various websites and blogs. Note: Dzineblog presents you “Interface Design Inspirations“, a se
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
検索フォームや見出しなどエレメントのデザインを集めたサイト -Elements of Design | コリス
Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
Styling File Inputs with CSS and the DOM // ShaunInman.com
The Last Rocket An 8-bit game for iPhone, iPad and iPod touch Minted of course. In partnership with File inputs (<input type="file" />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. Bef
MOONGIFT: » チェックボックスとラジオボタンを華麗に変身「FancyForm」:オープンソースを毎日紹介
よく見るインタフェースと言うのは、操作の慣れや安心感はあるものの、先進的な印象は受けづらい。もしかすると何も感じないかも知れないが、そこをちょっと変えると印象がぐっと変わってくる。 2.0系サイトを作るなら、フォームにもこだわってみてはいかがだろう。 今回紹介するフリーウェアはFancyForm、チェックボックスとラジオボタンを華麗に変身させるソフトウェアだ。ソースは公開されているが、ライセンスは明記されていないのでご注意いただきたい。 FancyFormはチェックボックスとラジオボタン限定ではあるが、見慣れたものとはまったく違う変貌を遂げさせてくれる。チェックボックスはチェックマークまたはバツ印に、ラジオボタンは小さな丸になる。 これを使うと心象がぐっと変わるのは確かだ。また、チェックボックスの場合チェックがない場合の動作がいまいち分かりづらいが、バツ印が出ることで意図が明確になる効果が
検索条件の入力画面で配慮したいインターフェース例
今回は「ユーザが混乱してしまうインターフェースとその解決法」の1パターンを、会員登録をして使うECサイトを例にしてご紹介します。 それでは、上記の状況をどのようなインターフェースで表現すれば良いでしょうか。一例を挙げてみます。 2通りのお届け先のいずれかを、ラジオボタンで選択させる形式です。 図1の場合、弊社のユーザビリティ調査では、お届け先を変更したいユーザがラジオボタンのチェックを忘れ「お届け先の変更」ボタンをクリックしてしまう様子が観察されました。さらに、ラジオボタンと「変更」ボタンのどちらをクリックすれば良いか分からない、と困惑するユーザもいました。 問題の原因は下記の2点が考えられます。 原因 1: 「別のお届け先に送る」と「お届け先の変更」という、同じアクションを想起させる文言が近接している 原因 2: 「変更」ボタンのアフォーダンスが高く、ユーザの行動はボタンのクリックに誘導
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
自由記述欄の入力率を上げるには 2 (ユーザビリティ実践メモ)
2007年3月5日のユーザビリティ実践メモにて、お問い合わせや資料請求ページにおける自由記述欄の入力率を高めるコツをご紹介しました。 ユーザが入力欄に何を入れていいかわからずに戸惑う可能性があることを考慮し、適切な入力例を添えて入力を促す、という内容です。 詳細はこちら 自由記述欄の入力率を上げるには 入力フォームがあるページを閲覧したユーザにいきなり自由記述欄への回答を促してしまうと、ユーザはたとえ何を記述すればよいかがわかっていても、最初の印象として入力が面倒だと感じて問い合わせや資料請求そのものを諦めてしまう可能性があります。 そこで、まずは入力しやすい個人情報や選択式の項目を配置し、次に自由記述欄を設けることをおすすめします。 このようにすることで、最初にユーザが感じる心理的な負担が少なくなり、ある程度簡単な入力を進めたあとに自由記述欄を見るため、入力作業の敷居が低くなります。
自由記述欄の入力率を上げるには (ユーザビリティ実践メモ)
問い合わせや会員登録フォームなどで、ユーザが自由に入力できるテキストボックス（自由記述欄）を用意しているサイトは少なくありません。 問い合わせの内容 商品見積り依頼の内容 転職サイトの職務内容 テキストボックスはユーザにとって自由度の高いインタフェースですが、ユーザビリティテストを観察すると、選択式の項目に比べ入力率が大きく落ちる傾向にあります。 ユーザが入力をスキップするのは、（必ずしも項目に無関心だからではなく）何を入れていいかわからず迷ってしまうことが大きな要因です。 そこで、テキストボックス周辺に、「入力例を見る」といったリンクを配置し、記入例やサンプルの文面を提示するのが良い対策の一つとなります。 なお、記入例やサンプルの文面は、具体的なケースに分けて記載すると良いでしょう。 例えば、中古車サイトの「カーセンサー.net」では、在庫確認・見積り依頼のフォームで、様々な想
CSSでデザインされたテーブルレスでクールなフォームサンプル:phpspot開発日誌
Tableless forms consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. CSSでデザインされたテーブルレスでクールなフォームサンプル。 次のようなフォームのサンプルがダウンロードできます。 HTMLとCSS、画像がセットになっているので、ちょっと編集していろいろと応用できそう。 ログインの横にアイコンが表示されていると直感的かつ、オシャレなフォームになってますね。デザイン面で参考に出来そうです。 関連エントリ ブログのコメント部分やコメントフォームのデザインを色々集めたサイト
ブログのコメント部分やコメントフォームのデザインを色々集めたサイト:phpspot開発日誌
Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメント部分やコメントフォームのデザインを色々集めたサイト。 いろんなブログのコメント部分やコメントフォーム部分の画像をコレクションしているようです。 コメント部分 コメントフォーム部分 これだけのデザインサンプルがあると、自分がデザインする時に大いに参考に出来そうですね。 形が決まったら後はオリジナリティを加えてデザインを完成させるという方法でデザインすれば効率よくカッコいいコメント部分が作れそうですね。 関連エントリ 2006年を彩った50の超美麗CSSデザインサイト集 ウェブデザインに便利なツールをまとめた「Web Design Tools」
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」:phpspot開発日誌
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」 2006年10月22日- Tooltip for forms You can download the entire script from this Zip file フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」。 このライブラリを利用すれば、次の画像のようなツールヒントをフォーム上に出すことが可能です。 実装は、必要なライブラリを読み込んだ後、次のように、tooltipText 属性にヒントを書きます。 <input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"> そして、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
入力テキストその場で確認！ライブコメントプレビュー