bookslope blog » guideline http://www.bookslope.jp/blog Information Architect/User Experience Designer Thu, 29 Dec 2011 06:11:25 +0000 ja hourly 1 http://wordpress.org/?v=3.1.1 Information Architect/User Experience Designer bookslope blog no Information Architect/User Experience Designer bookslope blog » guideline http://www.bookslope.jp/blog/wp-content/plugins/powerpress/rss_default.jpg http://www.bookslope.jp/blog Gadgets & Widgets UI Guidelines http://www.bookslope.jp/blog/2009/11/gadgetswidgetsguidelines.html http://www.bookslope.jp/blog/2009/11/gadgetswidgetsguidelines.html#comments Tue, 17 Nov 2009 15:24:00 +0000 bookslope http://www.bookslope.jp/blog/?p=847 Consistencyというエントリーを読んだところで、UIパーツとしてガジェットないしウィジェットのガイドライン系をまとめたものがほしいと思ったので、いろいろ探して整理してみた。

Google Wave

iGoogle

Google Desktop

Windows Desktop

Windows Sidebar

Yahoo!

Apple (Dashbord)

iPhone Human Interface Guidelines

Android

Opera

]]> http://www.bookslope.jp/blog/2009/11/gadgetswidgetsguidelines.html/feed 2 Creating & maintaining a web style guide http://www.bookslope.jp/blog/2006/05/creating_mainta.html http://www.bookslope.jp/blog/2006/05/creating_mainta.html#comments Tue, 30 May 2006 00:31:06 +0000 bookslope http://www.f00-042.204.183.203.fs-user.net/blog/2006/05/creating-maintaining-a-web-style-guide.html pebbleRoad Studios: Creating & maintaining a web style guide
http://www.pebbleroad.com/article/creating_maintaining_a_web_style_guide/

ということで、シンガポールで設計コンサルタントをしているという「PebbleRoad」ブログから引用。

『ウェブスタイル・ガイド』としているようですが、ウェブサイトを構築したあとの運用をメインにした際のガイドラインでしょうかね。

下記のようなアウトラインとしているようなので、ガイドライン作成時に参考にしてもいいのではないでしょうか。

Web style guide TOC:

  • Why is this style guide important?
  • When should we use this guide?
  • What are ‘templates’ and why should we care?
  • Information architecture guidelines
  • Using the [company] logo
  • Masthead (or header)
  • Footer
  • Color palette
  • Typography
  • Images & media
  • Accessibility
  • Authoring guidelines (or how to write web content)
  • Legal considerations (or web policies)
  • Technology considerations
  • Templates/CSS downloads
  • Contact & support information

When applicable, I use the following instructional model to communicate each item:

  • The guidelines
  • Examples (or how flexible can we be?)
  • Non-examples
  • XHTML code (if any)
  • CSS rules (if any)
  • Downloads (if any)

Maish Nichani氏は下記サイトも編集をしているようです。

elearningpost
http://www.elearningpost.com/

]]> http://www.bookslope.jp/blog/2006/05/creating_mainta.html/feed 0 The Guided Wireframe Narrative for Rich Internet Applications http://www.bookslope.jp/blog/2006/05/the_guided_wire.html http://www.bookslope.jp/blog/2006/05/the_guided_wire.html#comments Wed, 10 May 2006 17:16:12 +0000 bookslope http://www.f00-042.204.183.203.fs-user.net/blog/2006/05/the-guided-wireframe-narrative-for-rich-internet-applications.html 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よりやりやすいということが書かれていますが、ワイヤーフレームの目的と使い方によってそのあたりは意見が分かれるところでもあると思います。

]]> http://www.bookslope.jp/blog/2006/05/the_guided_wire.html/feed 0 Apple Style Guide (2006 version) http://www.bookslope.jp/blog/2006/03/apple_style_gui.html http://www.bookslope.jp/blog/2006/03/apple_style_gui.html#comments Tue, 14 Mar 2006 09:08:37 +0000 bookslope http://www.f00-042.204.183.203.fs-user.net/blog/2006/03/apple-style-guide-2006-version.html InfoDesign: Understanding by Design – News | News flash
http://www.informationdesign.org/archives/003614.php#003614

The Apple Publication Style guide provides editorial guidelines for text in instructional publications, technical documentation, reference information, training programs, and the software user interface.” (Apple Developers Connection) – courtesy of usablehelp

ということで、Appleのパブリシティ関連のデザインガイドライン最新版 (2006年度版) が公開されているようですね。

PDFは下記から取得できます。

http://developer.apple.com/documentation/UserExperience/Conceptual/APStyleGuide/AppleStyleGuide2006.pdfhttp://developer.apple.com/documentation/UserExperience/Conceptual/APStyleGuide/AppleStyleGuide2006.pdf

Appleについては「User Experience Documentation」でいろいろと公開されているのですべて目を通すとかなり勉強になります。

User Experience Documentation
http://developer.apple.com/documentation/UserExperience/

]]> http://www.bookslope.jp/blog/2006/03/apple_style_gui.html/feed 0 IA’s Guide to Making Sitemaps http://www.bookslope.jp/blog/2006/02/the_lazy_ias_gu.html http://www.bookslope.jp/blog/2006/02/the_lazy_ias_gu.html#comments Thu, 02 Feb 2006 12:27:34 +0000 bookslope http://www.f00-042.204.183.203.fs-user.net/blog/2006/02/ia%e2%80%99s-guide-to-making-sitemaps.html The Lazy IA’s Guide to Making Sitemaps – Boxes and Arrows
http://www.boxesandarrows.com/view/the_lazy_ia_s_guide_to_making_sitemaps

にサイトマップの作り方の記事があります。

1. ExcelとVisio2000かVisio2003 (Windows専用)
2. Wordとインスピレーション (Mac OSとWindows)

について書かれているようです。

image_28_turbek_sitemap_inspiration_4_arrange.gif

インポートとエクスポートでできるのはわかるんですが、そのあとの編集・更新がしにくくなるのが難ですね。
以前試しにExcelとVisioの連携をしたことがあるんですが、単純なツリーでしかうまくダイヤグラム化できないんですよね……。

アウトラインの編集であれば、Excelを使うより単純なアウトラインプロセッサでしてしまったほうが速いですし (慣れの問題かも知れませんが)。

ちなみに、よく使うパターンは、インスピレーション (Win) とVisio2003ですね。

インスピレーションは概要設計時やサイトオーディット時にサクッとつくるときに重宝しますね。
ポイントはダイヤグラムからはじめるのではなくアウトラインでつくるという点です。

ただ、インスピレーションだと視覚的にキレイに仕上げることが苦手なのでどうしたもんかといつも悩みます。

地道にVisioで描いていくこともいいんですが、構造という点を機械的に処理したいときはただのドローソフトだとつらいですね。「Ridual」も試そうと思ったこともあるんですが断念しています。

ほかにもっといいソフトがないか探索中。

]]> http://www.bookslope.jp/blog/2006/02/the_lazy_ias_gu.html/feed 0 Windows Vista UX Guidelines (preliminary) http://www.bookslope.jp/blog/2005/09/windows_vista_u.html http://www.bookslope.jp/blog/2005/09/windows_vista_u.html#comments Mon, 19 Sep 2005 10:08:13 +0000 bookslope http://www.f00-042.204.183.203.fs-user.net/blog/2005/09/windows-vista-ux-guidelines-preliminary.html 「Windows Vista」の発表があってとくにブログにも書かなかったのですが、β版がすでにダウンロードできるんですね。

Microsoft Windows Vista Developer Center
http://msdn.microsoft.com/windowsvista/

Download the User Experience Guidelines
A new shell and presentation system in Windows Vista makes it easy for you to integrate visually-rich and dynamic user experiences into your applications.
Download the guidelines.

ということで、β版のダウンロードよりこちらのガイドラインのほうが目についたので早速「Windows Vista UX Guidelines」をダウンロードしてみました。

Download details: Windows Vista UX Guidelines (preliminary)
http://www.microsoft.com/downloads/details.aspx?FamilyID=FD380553-911E-4659-A085-4DD58AE4B9AE&displaylang=en&Hash=T7VNW69

1つあったのがシステムフォントが変わりますね。

fonts1.gif

System Font (Segoe UI)
This is preliminary documentation and is subject to change.
Segoe UI (pronounced, “SEE-go”) is the new MicrosoftR Windows Vista? system font. It is designed specifically for user interfaces and is optimized for ClearType font technology.
With the introduction of Segoe UI, Windows improves the consistency in how users see all text across all languages. The design of the Segoe UI letterforms is also tightly aligned with the Aero principles and design goals.

ボチボチ見ていこうかと。

]]> http://www.bookslope.jp/blog/2005/09/windows_vista_u.html/feed 0 Durability of Usability Guidelines http://www.bookslope.jp/blog/2005/01/durability_of_u.html http://www.bookslope.jp/blog/2005/01/durability_of_u.html#comments Mon, 17 Jan 2005 04:55:22 +0000 bookslope http://www.f00-042.204.183.203.fs-user.net/blog/2005/01/durability-of-usability-guidelines.html Durability of Usability Guidelines (Jakob Nielsen’s Alertbox)
http://useit.com/alertbox/20050117.html

About 90% of usability guidelines from 1986 are still valid, though several guidelines are less important because they relate to design elements that are rarely used today.

ということで、ユーザビリティに関するガイドイランがAlerboxでも紹介されています。

これによると、90%はまだ従来のガイドラインが有効で残りの10%が最近の動向を踏まえて刷新することになると。

]]> http://www.bookslope.jp/blog/2005/01/durability_of_u.html/feed 0 Guidelines for reviewing usability test reports http://www.bookslope.jp/blog/2005/01/guidelines_for.html http://www.bookslope.jp/blog/2005/01/guidelines_for.html#comments Sun, 16 Jan 2005 13:25:52 +0000 bookslope http://www.f00-042.204.183.203.fs-user.net/blog/2005/01/guidelines-for-reviewing-usability-test-reports.html Guidelines for reviewing usability test reports
http://www.userfocus.co.uk/resources/researchquestions.html

sability practitioners are called on, not only to conduct many research studies during their careers, but also to read, review, and advise on usability studies that have been conducted and reported by others. The ability to critically review the research of others, and to help stakeholders weigh up the merits or shortcomings of research data and conclusions, is an extremely valuable skill. These checkpoints will help you ensure your review covers the key issues.

ということで、ユーザビリティテストのチェックポイントのガイドラインが公開されていますね。

下記からPDFをダウンロードできます。

Use this version as a working checklist to evaluate a usability study.
Research checklist (pdf format, 60KB).

]]> http://www.bookslope.jp/blog/2005/01/guidelines_for.html/feed 0 Research-Based Web Design ＆ Usability Guidelines http://www.bookslope.jp/blog/2005/01/research-based.html http://www.bookslope.jp/blog/2005/01/research-based.html#comments Thu, 13 Jan 2005 09:40:10 +0000 bookslope http://www.f00-042.204.183.203.fs-user.net/blog/2005/01/research-based-web-design-%ef%bc%86-usability-guidelines.html Research-Based Web Design & Usability Guidelines
http://usability.gov/pdfs/guidelines.html

に「Research-Based Web Design & Usability Guidelines」というガイドラインの情報があります。

これをアクセシビリティについて活発な活動をされているインフォアクシア (植木さん) が翻訳されているのでご紹介。

sample.gif

『Research-Based Web Design ＆ Usability Guidelines』日本語訳 ? インフォアクシア
http://www.infoaxia.com/resources/research_based/index.html

最近更新された「第2章：ユーザー・エクスペリエンスの最適化」なんかはまさにウチが専門分野としてあつかっている分野なだけにこういう活動 (翻訳) には脱帽です。

第2章：ユーザー・エクスペリエンスの最適化 ? インフォアクシア
http://www.infoaxia.com/resources/research_based/chapter02/index.html

]]> http://www.bookslope.jp/blog/2005/01/research-based.html/feed 0 Working Drafts: Techniques for Web Content Accessibility Guidelines 2.0 http://www.bookslope.jp/blog/2004/11/working_drafts.html http://www.bookslope.jp/blog/2004/11/working_drafts.html#comments Sat, 20 Nov 2004 04:50:08 +0000 bookslope http://www.f00-042.204.183.203.fs-user.net/blog/2004/11/working-drafts-techniques-for-web-content-accessibility-guidelines-20.html w3c_home.png

Archive of W3C News in 2004
http://www.w3.org/News/2004#item185

にWCAG2.0のテクニック集があるようですのでメモｌ。

Working Drafts: Techniques for Web Content Accessibility Guidelines 2.0

2004-11-19: The Web Content Accessibility Guidelines (WCAG) Working Group has released a First Public Working Draft of Client-side Scripting Techniques for WCAG 2.0 and three updated Working Drafts: HTML Techniques for WCAG 2.0, CSS Techniques for WCAG 2.0, and General Techniques for WCAG 2.0. The drafts give guidance on using HTML, XHTML, ECMAScript and Cascading Style Sheets (CSS) to create accessible content. Deprecated examples illustrate techniques that content developers should not use. Read about the Web Accessibility Initiative. (News archive)

Client-side Scripting Techniques for WCAG 2.0
http://www.w3.org/TR/2004/WD-WCAG20-SCRIPT-TECHS-20041119/

HTML Techniques for WCAG 2.0
http://www.w3.org/TR/2004/WD-WCAG20-HTML-TECHS-20041119/

CSS Techniques for WCAG 2.0
http://www.w3.org/TR/2004/WD-WCAG20-CSS-TECHS-20041119/

General Techniques for WCAG 2.0
http://www.w3.org/TR/2004/WD-WCAG20-GENERAL-20041119/

]]> http://www.bookslope.jp/blog/2004/11/working_drafts.html/feed 0