UXNT - New Trends on User Experience

Using Blogs to write Specs?

2007-05-24T10:59:00.000-05:00

I was having diner at Harvard Sq. with a couple of friends from Endeca, talking about user experience in general and its challenges, when occurred to me that Blogs would be a great medium for writing specification documents. What of an epiphany! Real people posting comments about a spec document, or should I call it "specBlog"?

Who actually reads specs... thoroughly?
The truth about spec documents is that you spend a lot of time writing, creating mockups, thinking through every step an end-user may take, to end up with a 40+ pages document that nobody reads - thoroughly. No targeted comments are ever made, people tend to browse the pages and only make a comment when they have a question about a mockup or two.

Targeted sections
Using blogs to write business specs or functional requirements would provide everyone the opportunity to dissect a large document into smaller sections or chapters, which could be released faster (a section every other day) and get immediate comment from your team.

Another good aspect I see about using blogs as medium is that you can actually split the arduous task of writing the entire document by yourself. You could assign sections to different people.

Better distribution
By using blogs, the intended "readers" can actually subscribe to the blog and receive an alert, e-mail or event via a feed reader. I would think that the reader would be more inclined to read a smaller section and make a quality and targeted comments immediately.

Based on quick and faster comments, the author of the section, can actually refine the post and engage a conversation among everyone.

Tagging the specBlog
Let's assume that the name of my blog is "ACME Specs" and inside my blog, we have many posts about different products. Each time I write a post about a particular section for a single product, I could use tags to categorize my post and link it to other related posts.

Now, here's a cool scenario, a post could be used in different products, in other words, if I have a global widget, such as an "AutoComplete Input Field" that is used throughout all my company's products, the very same post can be referenced in future specs by simply tagging your post with the same keywords used in the previously written post.

Wrapping up
If your boss is really anal-retentive about having full documentation - just for the sake of having it - you could simply copy the sections from your blog and package it into your old and beautiful Word template.

I would love to get comments about this idea and will be trying out myself on the next opportunity I have and share it with you.

WPF 3rd Party Controls

2007-05-23T15:23:00.000-05:00

Just a quick post on some of the WPF User controls out there.

NetAdvantage for WPF 2007 by Infragistics
Infragistics has released a WPF control suite that includes: xamDataGrid, xamCarouselPanel, xamCarouselListBox, xamDataCarousel, xamDataPresenter, xamEditors, some StylePacks, and a xamples Browser.

Chart FX for WPF by Software FX
Software FX has overhauled their Chart FX product to take full advantage of the 2D, 3D, animation, and data binding capabilities of WPF. Contact wpf@softwarefx.com for more information or download the NDA and apply for the beta program on their site.

Actipro Wizard by Actipro Software
Actipro Wizard is a WPF-based .NET control that conforms to the Wizard97 specification.

DataGrid for WPF by Xceed
A free, fully-featured, professional data grid control for WPF. Check out the Xceed DataGrid for WPF LiveExplorer for an online demo.

Wpf-Ribbon by DevComponents
A Guidelines-compliant implementation of the Office 2007 Ribbon control for WPF. Similar to their DotNetBar control for Windows Forms.

Actipro Ribbon by Actipro Software
Actipro Ribbon is a WPF-based .NET control that conforms to the Office 2007 UI specifications.

blendables by identity mine
Their essentials mix includes: Zoombox, ElementSnapshot, Carousel3D, ChromelessWindow, DragAndDrop, Pie, OSChecker, TimelinePanel, EvalBinding and SimpleBinding, NumericRangeToObjectConverter.

Please post any new links you may know.
Thanks,
Marcelo

HTML 5 Proposal Approved by W3C

2007-05-16T11:28:00.000-05:00

Exciting news for the front-end developers!

Back in October 2006, the father of HTML, Tim Berners-Lee - currently the W3C Director, acknowledged that the W3C has had difficulties on keeping the HTML language fresh and evolving:

"The perceived accountability of the HTML group has been an issue. Sometimes this was a departure from the W3C process, sometimes a sticking to it in principle, but not actually providing assurances to commenters. An issue was the formation of the breakaway WHAT WG, which attracted reviewers though it did not have a process or specific accountability measures itself. "
Reinventing HTML, by Tim Berners-Lee on October 10, 2006

In a surprise session, HTML 5 was proposed by the WHAT Working Group (founded by representatives of Mozilla, Apple and Opera) to the Consortium and accepted by the majority of the voting participants. They've also agreed on the following:

The WHAT Working Group’s HTML5 (Web Applications 1.0 and Web Forms 2.0) will become the current working draft, and an extensive review by the new working group will now take place.
The final W3C specification will be named "HTML 5".
The W3C specification will be edited by Ian Hickson (Google), editor of the WHAT-WG’s HTML5, and David Hyatt (Apple/Safari).

So, why was the WHAT Working Group formed?

In 2004, after a W3C workshop, Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these organisations set out to with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.

These days, the WHATWG is a growing community of browser vendors, web developers, and other people interested in the development of the the next generation of HTML and related technologies, specifically designed to allow authors to write and deploy applications over the World Wide Web.

Now, what everyone is itching to know...

What improvements will HTML 5 bring to our world?

This is an extremely exciting question and at a first glance, this new language is very promising:

New DOCTYPEs and DTDs
New Structures
New Semantics
New Controls - Whoo-hoo!
Client Side Form Validation
DOM APIs
And the introduction of Repetition Model

New elements

In addition to the above the input element's type attribute can now have the following new values, which enables a bunch of new native controls:

datetime, datetime-local, date, month, week, time, number, range, email, url

New Attributes

An overview of all elements from HTML4 that got new attributes in HTML5.

Element Attributes

a media?, ping
area ping
base target
button autofocus, form, replace, template
fieldset disabled, form
form data, replace
input autocomplete, autofocus, form, inputmode, list, min, max, pattern, step, replace, required, template
li value (no longer deprecated)
meta charset
ol start (no longer deprecated)
select autofocus, data, form
script async, defer
style scoped
textarea autofocus, form, inputmode, required

HTML4 didn't have a concept of an attribute that applies to every element. HTML5 calls such attributes global attributes. The following attributes from HTML4 are made global attributes:

class, dir, id, lang, title

The following new attributes are global attributes:

contenteditable, contextmenu, draggable, tabindex

HTML5 also has global attributes that also can be applied on elements from other vocabularies (when namespaced):

repeat (Web Forms 2)
repeat-start (Web Forms 2)
repeat-min (Web Forms 2)
repeat-max (Web Forms 2)

Changed Elements

These elements have new meanings in HTML5 which are incompatible with HTML4. The new meanings better reflects the way they are used on the Web or gives them a purpose so people can start using them.

a – The a element without an href attribute represents a "placeholder link".
address – The address element is now scoped by the new concept of sectioning.
b – The b element now represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is emboldened.
hr – The hr element now represents a paragraph-level thematic break.
i – The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized. Usage varies widely by language.
label – The browser should not transfer focus from the label to the control unless such behaviour is standard for the underlying platform user interface.
menu – The menu element is redefined to be useful for actual menus.
small – The small element now represents small print (for side comments and legal print).
strong – The strong element now represents importance rather than strong emphasis.

Dropped Elements!

That these elements are dropped means that authors are no longer allowed to use them. User agents will still have to support them and HTML5 will probably get a rendering section in due course that says exactly how. (isindex for instance is already supported by the parser.)

acronym (use abbr instead)
applet (use object instead)
basefont
big
center
dir
font (allowed when inserted by WYSIWYG editors)
frame
frameset
isindex
noframes
noscript (only dropped in XHTML5)
s
strike
tt
u

Dropped Attributes!

Some attributes for elements included in HTML4 are not allowed in HTML5:

Element Attributes

a rev, charset;
area nohref;
head profile;
html version;
link rev, target, charset;
map name;
meta scheme;
object archive, standby;
param valuetype;
script charset;
table summary;
td, th headers, axis;

In addition, HTML5 has none of the presentational attributes that were in HTML4 (including those on. Any attributes defined on elements that are not in HTML5 are (obviously) also not in HTML5.

APIs

HTML5 introduces a number of APIs that should help in creating web applications. These can be used together with the new elements introduced for applications:

2D drawing API which can be used with the new canvas element
API for playing of video and audio which can be used with the new video and audio elements
Persistent storage
Online / offline events
Editing API in combination with a new global contenteditable attribute
Drag & drop API in combination with a draggable attribute.
Network API
API that exposes the history and allows pages to add to it to prevent breaking the back button.
Cross document messaging
Listening to server sent events

Character Encoding

The character encoding can be declared using the meta element, but the syntax of the meta element has changed. In HTML 4.01 and earlier, the meta element was:

In HTML5, the syntax was simplified to remove the unnecessary markup, yet still remain compatible with the encoding detection implemented in most existing browsers.

<meta charset="UTF-8">

DOCTYPE

In HTML 4, the DOCTYPE was long and complicated, and very few people can actually remember it all. The complex PUBLIC and SYSTEM identifers are used to refer to the DTD. But because there is no DTD in HTML5, we’ve taken out the PUBLIC and SYSTEM identifiers and left the minimal amount of code that is both easy to remember and triggers standards mode.

Thus, in HTML 5, the DOCTYPE will simply be:

<!DOCTYPE html>

This does not apply to XHTML 5, for which there is no DOCTYPE sniffing and no need for any DOCTYPE at all.

Here’s a very interesting presentation by Lachlan Hunt at the Web Standards Group meeting in Sydney on 2007-01-25.

You may also download the presentation slides (PowerPoint) and audio recording (Ogg Vorbis).

Cheers!
Marcelo Paiva

All you need to know and learn about Silverlight

2007-05-11T18:12:00.000-05:00

There are hours of video presentations and tutorials below. Please leave your comments, just so that we can create some discussion around the subject.

Take the first step, downloading Expression Blend:

Expression Blend 2 May Preview

Marcelo

Update 1! Immediate Expression Blend Training

Tutorials

Training Videos

Webcasts

Update 2! More Samples from MSDN
http://blogs.msdn.com/expression/articles/543834.aspx

Simple WPF Demos

Color Swatch: An app that allows you do envision different color possibilities for interior decorating.

Animation Studio: This is a nifty little animation drawing tool.

Photo Book: Flipping a book of images using 2 1/2 D.

Video Shelf: Video mapped onto 3D planes, library like navigation.

Viewer3D: A motorcycle with particular camera moves to highlight different features

Infragistics' WPF Controls

Great examples on user controls, will need to download and install - Check the requirements. I found it to be slow, considering it's running locally.

http://www.infragistics.com/hot/wpf.aspx#NetAdvantageforWPFBeta

Chart FX for WPF

http://www.softwarefx.com/sfxWinFxProducts/cfxforWpf/

Sample Files and Resources

http://wpf.netfx3.com/files/default.aspx

WPF/Silverlight Blogs

http://thewpfblog.com/

http://blogs.msdn.com/tims/

http://blogs.msdn.com/okoboji/archive/2006/09/20/764019.aspx

http://blogs.msdn.com/tims/articles/475132.aspx

http://channel9.msdn.com/tags/WPF

WPF/Silverlight Tutorials

Whole Bunch of Code Samples and Video Tutorials

http://contentpresenter.com/

http://movielibrary.lynda.com/html/modPage.asp?ID=359

Channel 9 - Expression Blend Videos

Introduction to Blend Part 1: Introduction

Introduction to Blend Part 2: Interface Overview

Introduction to Blend Part 3: 2D Build

Introduction to Blend Part 4: 3D & Effects

MIX07 - Sessions About Design and Front Development

Designer/Developer Productivity in Windows Presentation Foundation

http://int1.fp.sandpiper.net/soma/applications/silverlight/v1/videos/XBD08.wmv

A View from the Front: Real World Experiences of WPF and Silverlight

http://int1.fp.sandpiper.net/soma/applications/silverlight/v1/videos/DES01.wmv

Building Rich Web Experience with Silverlight and Microsoft Expression Studio for Designers

http://int1.fp.sandpiper.net/soma/applications/silverlight/v1/videos/DES02.wmv

Designing with Microsoft Expression Web: Today and Tomorrow

http://int1.fp.sandpiper.net/soma/applications/silverlight/v1/videos/DES03.wmv

Getting UNSTUCK: Merging Design and Development in a 2.0 World

http://int1.fp.sandpiper.net/soma/applications/silverlight/v1/videos/XD008.wmv

Using the Desktop and Web to Power Ultimate User Experience Applications

http://int1.fp.sandpiper.net/soma/applications/silverlight/v1/videos/XD013.wmv

PANEL DISCUSSION: Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Success

http://int1.fp.sandpiper.net/soma/applications/silverlight/v1/videos/PAN12.wmv

PANEL DISCUSSION: Culture, Design, Business, and Technology: What? So What? Now What?

http://int1.fp.sandpiper.net/soma/applications/silverlight/v1/videos/PAN13.wmv

THE END - At least for now.

Designers and Front-end Developers Wanted

2007-05-09T21:09:00.000-05:00

Welcome user experience community!

This is our first post and I would like to write a few lines to talk about the objective of this blog.

There many blogs out there informing us about user experience design and development, but very few of them tend to concentrate on a wide range of new trends in this industry - and that's what we are embarking to do!

In the next few days, we'll be engaging and selecting design strategists and researchers to assist us on delivering quality and timely content.

If you are interested on jumping on the boat with us, please leave a quick comment or send me an email (mpaiva@gmail.com) to join the team.

Cheers,
Marcelo

UXNT - New Trends on User Experience

Using Blogs to write Specs?

WPF 3rd Party Controls

HTML 5 Proposal Approved by W3C

So, why was the WHAT Working Group formed?

What improvements will HTML 5 bring to our world?

New elements

Document Structure

Data

Applications

New Attributes

Element Attributes

Changed Elements

Dropped Elements!

Dropped Attributes!

Element Attributes

APIs

Character Encoding

DOCTYPE

All you need to know and learn about Silverlight

Designers and Front-end Developers Wanted