Archive for the ‘wireframe’ tag
フッターサイトマップのデザイン
に「Key Footer Information」として、フッターの情報として重要な6つを取り上げています。もうどのウェブサイトを見てもこれらの情報は掲載されていると思いますし、ある意味デフォルト (標準値) であるとも言えます。
フッターに置く重要な要素
- About Us Link/リンク (について)
- Contact Us Link/お問い合わせ (連絡先)
- Terms of Service/サイトの利用方法 (利用規約)
- Privacy Policy/プライバシーポリシー (個人情報の取り扱い)
- Site Map/サイトマップ
- Address and Phone Number/住所や電話番号
ただし、このうち「サイトマップ」については、単にサイトマップページへのリンクを置くこともそうですが、最近のウェブサイトでよくみかけるフッターにサイトマップそのものを掲載してしまうケースをよく見かけます。この「フッターサイトマップ (仮称)」について参考になるエントリーがあったので合わせてご紹介します。
「Benefits of Placing a Sitemap in the Footer」として、フッターにサイトマップを置くことでの価値を6つあげています。
フッターにサイトマップを置く6つの価値
- ユーザーの興味や関心を引くため (クリックや滞在時間を持続させるため)
- ユーザーが情報を見逃さないようにするため
- リンクを促進するため (重要な情報に誘導するため)
- ユーザー (読者) がすぐ次に進めるよう時間の節約になるため
- ユーザーのクリック (数?) の節約になるため
- 機能的なレイアウトデザインのため (サイトを大きく見せるため)
これと、あとはやはりSEOになるでしょうか。ひょっとしたらスパム扱いになりそうな気がしなくもないですが、全ページのフッターにサイトマップを掲載して被リンクを多く持つことはSEOとしては有効だと言われます。
ということで、いくつかの事例を取り上げた上で、Tipsとして下記図にまとめられています。
フッターサイトマップのデザインにおける3つのTips
- サイト構造に合わせて分類する
- タイトルおよびヘッドラインを使用する
- 一貫したルールでコンテンツ (リンク) を並べる
これとぜひ取り入れておきたいのが、下記でしょうか。
- パン屑リスト (経路と現在位置)
- 履歴 (最終訪問ページやそのカテゴリー)
- 目的別リンク (ファセット分類)
そのほか、たくさんの事例 (下記にリスト) と合わせて紹介されているので、参考にしてみてはどうでしょうか。
効果的なプロトタイピングとデザインプロセス
「ワイヤーフレーム」「プロトタイピング」という言葉は仕事がら慣れ親しんだものではあるのですが、意外と突き詰めて考えると奥が深いことに驚きます。
先日参加してきた「IA Summit 2009」のワークショップセッション「Integrating Effective Prototyping into Your Design Process」でFred Beecher氏が「プロトタイプは2枚以上あって相互に行き来が可能なもの」と話されていました。たしかに「ワイヤーフレーム」と言うと1枚絵のようなものを想像する人も中にはいるかも知れません。
ワイヤーフレームを絵としてとらえるのか試作品としてとらえるのかで解釈の違いが発生します。これもずっとある課題ではあるのですが、Fred Beecher氏のセッションでは「Visual (絵)」と「Functional (機能)」の2軸で整理してありましたので参考に取り上げてみます。
図内の略称は、H: High/L: Low/F: Functional/F: Fidelityです。
左下の「LVF/LFF」が一番抽象度が高くて、右上の「HVF/HFF」が最終形に近いという感じでしょうか。ほとんどのワイヤーフレームは、実はこの左下にある「LVF/LFF」のような気がします (つまりWireframe Sketches)。ただ求められるのは右上の「HVF/HFF」だったりすることもあると思います。ここの認識が関係者により違っていたらマズイので、はじめから認識の擦り合わせのために成果物サンプルは用意しておくほうがいいでしょうな。
右上: HVF/HFF (High VIsual Fidelity/Low Functional Fidelity)
・既存システムに新機能を盛り込む際のユーザーテストに使える
・一般的なユーザーとのテストに使える
・離れた開発チームとのドキュメント共有に使える
左上: HVF/LFF (High VIsual Fidelity/Low Functional Fidelity)
・ビジュアルデザイン上のユーザビリティの課題の発見に使える
・一般的なユーザーとのテストに使える
右上: LVF/HFF (High VIsual Fidelity/Low Functional Fidelity)
・遠隔によるテストに使える
・ステークホルダーとの間でUXデザインやUX開発要件 (方向性) の確認に使える
・離れた開発チームとドキュメントの共有に使える
左下: LVF/LFF (High VIsual Fidelity/Low Functional Fidelity)
・足りない機能の発見に使える
・ワークフローの問題の発見に使える
・いいUXコンセプトと、そうではないUXコンセプトの切り分けに使える
もちろん案件や提出/支給相手にもよるのでしょうけど、ボクのまわりではそれほど見た目としても機能としても求めていないような気がします。その理由は、 その後の工程で結局のところ補完 (というかカバー) していることが言えます。WF単体のクオリティ (?) が高くてもその後の工程でそれをうまく (効率よく) 受け取れないと、プロジェクト全体のクオリティは下がります。
例えば、ワイヤーフレームやプロトタイピングの専用ツールでWebデ ザイナーがクリッカブル情報をせっせとすべて埋め込んだとしても、その後のHTMLコーディングで効率よくそれが拾いだせなければ、とどのつまり二度手間 になります。二度手間である以上に、Webデザイナーが埋め込んでいる工数はかなり無駄になってしまうとも言えます。
そう考えると、そのあたりの折り合いを全体としてどうつけていくのかがポイントになります。
このセッションのスライドがすでにSlideshareにあがっていましたので詳細は下記をご覧ください。
Get Wireframing and Prototyping
Fred Beecher氏は「Axure」についてもワークショップを開いていたりするようですが、これに関係して「ワイヤーフレーム」や「プロトタイピング」に関するエントリーがあったのでご紹介します。
まず「Get Wireframing」という下記エントリーですが、すごいですね。よくまとめたなと感心してしまいます。
内容は下記のアウトラインになっているので、すべてがいいリファレンスになりますな。
「Article」などは個別に集めてたまに読む程度だったのですが、まとまっているのでいつでも参照できます。
- Techniques
- Tools
- Wireframe Examples
- Wireframing Articles of Interest
- Paper Prototyping
- Useful Wireframing Resources
- Kick Ass Books
次に「16 Design Tools for Prototyping and Wireframing」ですが、これはツールを16個あげてそれぞれをレビューしています。
と、この2つのエントリーだけでもリストアップしてみると24ものツールがあることになります。
もちろん「multifunctional applications (多機能なツール)」としてしまえば、世の中のほとんどのツールが含まれてしまうかも知れませんが。
これからツールを検討しようとしていた場合、このリストアップは参考になるのではないでしょうか。ボク自身触ったことがあるのはごくごく一部のような気がしますので時間のあるときにでも試してみたいと思います。
- Visio – Visualize, explore, and communicate complex information.
- OmniGraffle Pro – Create diagrams, process charts, quick page layouts and website mockups
- Axure RP Pro – Rapidly create wireframes, prototypes and specifications for applications and web sites.
- iRise Pro
- Pencil – Free sketching & GUI prototyping tool, can be installed as a Firefox add-on or as a standalone application.
- SmartDraw
- MockupScreens – For the Non-Designers, allows you to sketch and organise screen mockups.
- Balsamiq Mockups – Easily and quickly created rough mockups with predefined elements
- Lucid Spec
- ConceptDraw Pro
- iPlotz – Quickly sketch wireframes of Web sites and demonstrate navigation between pages
- Go Analogue
- PowerPoint or Keynote
- Adobe Fireworks
- HTML
- Adobe Flash
- Fluid IA – Agile UI Prototyping
- OverSite – Provides a menu of widgets to create wireframes, or mockups with drag and drop features.
- Justinmind – Design a wireframe and test their web usability
- EasyPrototype – Works with your existing techniques such as paper sketches, Photoshop mockups etc.
- Gliffy – Create website wireframes and share web mockups with anyone.
- Jumpchart – Online collaborative wireframe
- Lovely Charts – Diagraming app that allows you to create site maps, flowcharts, wireframes and more
- Protoshare – Collaborate online wireframe tool with real time communication and clickable wireframes.
The Guided Wireframe Narrative for Rich Internet Applications
The Guided Wireframe Narrative for Rich Internet Applications – Boxes and Arrows: The design behind the design
http://www.boxesandarrows.com/view/the_guided_
wire
Wireframes. We’ve all done them. We’ve all had to make sure our clients look at placement, labels, flow, and real estate distribution?but ignore color and design at all cost because, after all, they are wireframes.
ということで、andres zapata氏がRIA (プロトタイプ) についてのワイヤーフレームの物語 (?) をまとめているので興味深い。
ここではVisioが前提のようで、HTMLよりやりやすいということが書かれていますが、ワイヤーフレームの目的と使い方によってそのあたりは意見が分かれるところでもあると思います。
Slides from Wireframe panel (IA Summit 2006)
今年も「IA Summit 2006」が開催されているようで、行けないのはとても残念です。
IA Summit 2006
http://iasummit.org/2006/blog/
IAAJを主催しているコンセントの長谷川さんが行ってなにか話すらしいので、帰国後の報告会を楽しみにしています。
IAAJ: Information Architecture Association Japan ≫ Blog Archive ≫ IA Summit 06 Brief Summary
http://iaaj.org/2006/03/27/iasummit06-brief-summary/#more-28
それはそれとして、興味ありの記事があったのでご紹介。
IA Summit 2006 ≫ Blog Archive ≫ Slides from Wireframe panel (#1)
http://iasummit.org/2006/blog/?p=84
PowerPoint slides from the panel “Wireframes: A comparison of purposes, processes, and products” are available. Also, you may want to download this short movie showing Axure in action (linked to from Laurie’s slides).
ということで、ワイヤーフレームのプログラムで使用したスライドがダウンロードできるようです。
http://jefflash.com/work/presentations/iasummit/2006/WireframesPanel.ppt
ワイヤーフレームを下記ツールを使用してみて、相性であったり作成方法などが簡単にまとめられているようなのでとても参考になるかと思います。
- Flash
- HTML
- Illustrator & Visio
Flashとかだと「ワイヤー」というよりモックアップになるよなあ (ぼそ)。
いろいろ試してみたいものですが、日々の業務に追われるとなかなかそこに割ける時間がないのが現実です。
いっそ、研究会など立ち上げて試行錯誤したほうがいいかも。
ワイヤーフレームとHTML
Wire Frame Your Site [Design Practice]
http://www.sitepoint.com/article/wire-frame-your-site
ワイヤーフレームとプロトタイプという記事はいままでも、紙とかWordとかPDFとかでもあったかと思いますが、HTMLとしての記事なので実に興味深いです。
たしか「Boxes and Arrows」でもそういう記事があったと思ったので、探したらやっぱりありました (↓)。
Boxes and Arrows: HTML Wireframes and Prototypes: All Gain and No Pain
http://www.boxesandarrows.com/archives/html_wireframes_and_prototypes_all_gain_and_no_pain.php
わたしのまわりでは以前からこの方法が一番なじみ深いのですが、HTMLにするにしてもどういうふうに構築して、かつどのように活用するかは議論できるところだと思います。
Wireframe Annotations in Visio
Boxes and Arrows: Wireframe Annotations in Visio : Special Deliverable #11
http://www.boxesandarrows.com/archives/wireframe_annotations_in_visio_special_deliverable_11.php
- Step 1: Creating the annotation shape and the footnote shape
- Step 2: Establishing a relationship between the annotation and the footnote
- Step 3: Changing the behavior of the annotation
ワイヤーフレームをVisioで作成することが多いのは「[IA] ワイヤーフレーム」でも触れたのですが、細かいところをどうやって描いているのかには個人差があります。
(わたしも含めて) Adobe Illustratorで慣れた方だと、ステンシルの作成・追加やレイヤーの活用、はたまたマスターの概念はすぐ理解できると思います。
この記事はワイヤーフレームの註釈 (?) について描き方をまとめてくれています。数値で制御することなど参考になる点も多々あると思うのでご紹介しときます。
[IA] ワイヤーフレーム
ウェブサイトの設計にはユーザーインターフェース (UI) に関する設計書もドキュメントとして作成する必要があります。
「O’Reilly Japan — Catalog — Web情報アーキテクチャ 第2版」にも記述されている「ワイヤーフレーム」について関連情報を調べてみました。
同書籍のp. 294にある「IA Wiki」サイト内のワイヤーフレーム関連情報は下記URLからリンクできます。
IAwiki: WireFrames
また、このページから下記ページにリンクしているのですが、ワイヤーフレームに対する賛成意見と反対意見があったので引用させてもらいます。
Boxes and Arrows: Where the Wireframes Are: Special Deliverable #3
The Pros and Cons of Wireframes
Pros
- demonstrates a site concept quickly, allowing clients to react to content placement and rendering
- can provide guidance to visual designers with respect to information priorities
- allows for usability testing early in the project lifecycle
- can elaborate on a singular vision for the site
- can facilitate collaboration between design team and information architects
- is easy for clients to understand
Cons
- hinders creativity and innovation by imposing (real or imagined) limits on design team
- distracts client from tasks at hand: evaluating page priorities, understanding information relationships
- is not necessarily HTML-ready if not developed to scale
- is not necessarily HTML-ready if developed without “chrome”
- does not provide accurate usability testing results
- relies on other documentation to provide a complete picture
- does not consider color, typography, and other brand identity elements
- requires time to wrestle with layout details, which might change in final design anyway
常日頃疑問に思っていることや不安に感じることが含まれていて非常に興味深いです。