Susana Vilaça

Another great example of Microsoft Kinect usage, and how it can be used to create new and different user experiences!

Chaotic Moon Labs’ “Board of Awesomeness” is intended as a technology teaser to show how perceptive computing can turn around the way we look at user experiences. The project utilizes a Microsoft Kinect device, Samsung Windows 8 tablet, a motorized longboard, and some standard and custom hardware to create a longboard that watches the user to determine what to do rather than have the operator use a wired or wireless controller. The project uses video recognition, speech recognition, localization data, accelerometer data, and other factors to determine what the user wants to do and allows the board to follow the operators commands without additional aid.

I was going through my feeds and on a post from Playfool I saw this new online gaming experience from kijjaa!, where you control your ship using your iPhone and your computer screen as the display device. Tough this concept is very interesting I completely agree with the blog author when he says this type of gaming isn’t going to replace the tradicional console system we have today. I like to play on my DS or iPhone when on my way to work/home. At home or when I invite friends I usually play on my home consoles. It’s a completely different experience. I wouldn’t like to replace that experience with one where I have to spend my iPhone’s battery, and power my laptop just to play some game.

Recently Nintendo as been struggling with some difficulties due to poor sales, and many have claimed that mobile gaming will be the future, especially for the casual player (one of Nintendo’s main targets). I think mobile platforms need to be considered as a new gaming platform, especially when videogames like Angry Birds or Cut the Rope have such a success. But when it comes to true video game lovers nobody likes their consoles and their videogame collection more.

source: The future of gaming – Playfool

Adobe launched an Android app that makes wireframes and prototypes. It works on tablets and it seems to be very useful to work in a collaborative environment, with your team. Wish I had an Android tablet so I could try it.

Here’s a video demo:

The video below is a new commercial, launched by Microsoft, about the XBox Kinect sensor. Kinect is a motion sensor for the XBox console and was initially intended for gaming purposes, however people started using it in various ways including in the fields of medicine, education and music.

This type of technology sure brings lots of challenges in the UX field. The gaming industry is still struggling with some interaction problems this sensor brings, and there are not many interaction patterns defined yet. Lets see where this takes us. For me, I believe in this technology, and I think there is room for evolving and improving.

Being a huge fan of videogames and having played them since childhood I’m an apologist that video games can really help boosting a child’s learning and educational curve.

At the Summit on Science, Entertainment, and Education Will Wright (game designer of video games like The Sims or Spore) talks about this subject and makes some interesting points:

Basically Will Wright summarizes the main aspects of what is learning and explains how videogames are useful for a good education experience.

Resuming, video games:

• allow identity
• offer a reason to do it (clear objectives)
• allow and mitigate risk (controlled environment)
• encourage failure
• problem solving: allows you to think outside the box´
• empower creativity and imagination

Of course, I think that playing outside with other children is also important but the fact that some healthy video games’ playing can bring many advantages cannot be denied.

So what are your thoughts on this? Would / Do you let your children play video games?

*image by Guild Grinding

Following my lastest post I present here some ideas for Portuguese parties to improve their online presence.

1. Clearly identify their view on which are our nation’s main problems

Ok, we have a problem with money! We need it but we don’t have it and no one wants to loans us money. The Portuguese people understands this, however we need more. We want to understand the problems. The whys and hows of our situation.

I think the main questions here are where and why. Where are the main problems and Why are we in these situation.

Political parties could use the web to explain the crisis to the Portuguese people using for example infographics, video infographics, podcasts or even Slideshare presentations. I saw this great video explaining the crisis of credit and I really think this type of resources are very helpful.

2. Present solutions for the identified problems

So here are the problems and here is how we plan to solve them! That’s pretty simple but unfortunately is where political parties fail most.

The electoral program is presented through something like a press conference and then a huge document is made available online. First in this press conferences only the main issues are presented, second the huge document presents some astonishing unclear and fuzzy proposals, and third the majority of the Portuguese people only ears the proposals through the media that, well, only show what they want.

So my message here is present your program directly to the voters. Make videos, podcasts, and speak with no intermediares. And also but no less important present clear and concrete solutions.

3. Provide means of direct contact

This is where social networks like Facebook and Twitter are really useful. Political parties should use these tools to speak and listen to their voters and not use it as a news feed or calendar.

Provide means for conversation and interaction with the party and mainly with the Prime Minister candidate. Make it personal, collaborative and inspiring.

4. Inspire change and optimism

And at last but not least use the Web to let people know you are committed. You want to change our situation and you have a clear vision of how.

Inspire people and make them really believe that coming out from this situation is possible.

We need solutions, not accusations or empty words.

In about one month (5 June) we’re going to have elections in Portugal. The 5 major political parties are already starting their campaigns which involves the traditional travelling around Portugal, speeches, travelling around Portugal, more speeches and hopefully live debates between candidates. So this is the pretty standard offline political party presence, plus all the media coverage.

For me, and I believe for the majority of the Portuguese people, I won’t see at least one full live speech from one of the candidates. I will watch the news and pay attention to what others (critics, experts) are saying  but I want at least one way of contacting directly with each one of the parties so I can get information about their proposals for the new mandate. I immediately thought “I’ll go to their websites. They must have what I’m looking for.”

So I went to all major parties websites:

1. Partido Socialista
2. Partido Social Democrata
3. CDU
4. Partido Popular
5. Bloco de Esquerda

Parties nr. 2 and 3 have made specific websites for the elections. The others have just created new areas in their existing websites.

As I visisted these websites I had three main questions in mind:

1. What are this party proposals for the new mandate
2. What’s your plan of action against our nation main problems
3. How do you intend to deal with the presence of the International Monetary Fund

As I visited website by website I was disappointed with what I saw when I first entered, which is News, answers to fights between parties and, in the corner, deep in the page, a link to the electoral compromise.

When I visited the electoral compromise, well, another disappointment… They presented me with a huge page or a PDF document (about 40 pages) to read! I still don’t know if my questions are answered in these pages because I haven’t read them yet…

Regarding the presence on social networks only found parties 1, 2 and 4 Facebook pages and they seem like a news feed…

I think political parties need to step up their game in the online field. The web and social networks are an excellent place for a more direct communication with the voters, with no intermediaries. Making videos or writting posts about one specific subject, or about one problem and what they think it will help solve it would be a step in getting people more involved and helping them decide their votes.

We don’t need more lines like:

“Portugal is this situation because José Socrates is a lousy Prime Minister! Portugal needs a strong and honest hand, and we are that hand!”

It’s been 3 weeks since I started using Office 2011 for Mac and I’m already wishing all apps for Mac had a ribbon.

Let me explain a bit my experience:

Until 2 years ago I was exclusively a Windows user. Sure I had already had some experiences with other Operating Systems, but not on everyday basis.

When I started using a Mac regularly I had to struggle against some habits, however there is one thing I never got used to – the damned inspectors (floating tool windows), that various applications for Mac have adopted and are always getting in your way!

These damned windows have so many things that negatively affect my experience, like:

• they are always in front of your working area, you never seem to know where to put them
• they open the last place you put them, which it isn’t necessarily where you need them to be
• they are not responsive and contextual, meaning that they do not adapt to your selection. For example, if you select an image it doesn’t show the image tools.

In Office 2007 I was used to having a ribbon where my tools were organized in a effective and neat way, that adapted itself to my selections, basically I didn’t had to worry about it! When I started used Office 2008 (and other Mac software) and had to work with those inspectors I really felt frustrated with the amount of time I lost just taking that window out of my way!

So when I saw the ribbon in Office 2011 I was really satisfied. My experience with Office has greatly improved and I just wish that other tools, like Omnigraffle for example, adopt a similar solution instead of those lame tool windows…

Below are some UI Patterns resources that I find useful in my everyday wrok life. Hope you find it useful

1. Quince

Quince is a beautiful website that allows you to search for patterns in an unusual way. You can search patterns by User Task, Tag Relations and Wireframes. I think their intention is good however I think they’re not very successful at classifying patterns what causes some usability problems. Regardless they have some useful stuff. Here’s the link: http://quince.infragistics.com/

2. Pattern Tap

One of my favourites! With an extensive number of collections, you find almost everything you want here. The downside here is that there are no description and rationale for each pattern.

http://patterntap.com/

3. Welie.com

A really good resource and with a strong rationale behind each pattern. The examples could be better.

http://www.welie.com/

4. UI Patterns

Similar to Welie.com however I think it has some findability problems. Shows some good examples.

http://ui-patterns.com/

5. Design Snips

A somewhat different resource, clearly oriented for designers.

http://www.designsnips.com/

6. MephoBox

Very similar to Pattern Tap.

http://box.mepholio.com/

7. Web & Patterns

This website has been growing and it’s becoming one of my favorites. Here you find various patterns and can also see comments and opinions from the community that are certainly helpful.

http://web-patterns.net/

8. Yahoo! Design Patterns Library

Really, really useful when you are trying to describe how a pattern works!

http://developer.yahoo.com/ypatterns/

9. Patternry

Very complete resource of patterns.

http://www.patternry.com/

10. Designing Social Interfaces Patterns

The ultimate guide for social interfaces

http://www.designingsocialinterfaces.com/patterns/Main_Page

11. Mobile UI Patterns

One of the few available. Really useful!

http://mobile-patterns.com/

One of the many wonders AR has brought to our everyday lives

If you have an iPhone check the app at http://itunes.apple.com/us/app/word-lens/id383463868

So Google knows my country (Portugal), he knows my search habits, my translation habits, and much more. So why the hell the default Google Translate languages are Spanish to English??

Lately I’ve been using Google Translate more often because I was assigned a project which requires some technical knowledge. Every technical term either I want to translate it to Portuguese, to better understand its meaning, or translate it to English to know what is the English word/expression. I’ve been doing this for some weeks know and the suggested languages were Afrikaans to English. Every time I used Google Translate I had to, at least, change Afrikaans to Portuguese.

To my astonishment, today I noticed it was no longer Afrikaans to English but Spanish to English! What a hell?? Spanish?? Why?? Google why did you put Spanish to English and not Portuguese to English?

Initially I gave Google some benefit of doubt and checked my Google Account settings to see if Spain or Spanish was anywhere defined, but no. I have as my country Portugal and as my default language English.

By simply fixing this to my home country language, Google would give me a better user experience and I wouldn’t certainly be frustrated by wasting tine setting up my translation options every time I use Google Translate. It’s simply a crappy experience!

Here’s a little secret that I’d like to share with you:  Most people just aren’t all that thrilled by forms. They  don’t like filling them in, they don’t like thinking about them, and they certainly don’t like the idea of having to design them.

by Caroline Jarret

If you already had to make some kind of form for a site or application you know that designing the right form it’s not that straightforward. If you ask to much information – users don’t like, if you don’t make them pretty -  users don’t like, if you don’t choose the right layout -  users get confused, and so on.

So why it’s so important to invest in forms? Usually forms are a way users register on your website, buy something, etc. All core tasks of a website. If forms are difficult to use, ugly or ask too much information, users won’t make the step of filling them. Users will just quit the task, get out of your site and move to a nice and friendlier one.

So I leave you here some guidelines to consider when designing forms.

1. Choosing the layout

Choosing the right layout may vary depending on the length of your form and the space available on the page. The type of layouts generally used are:

• Top aligned labels: this type of layout increases readability but requires more vertical space. If your form is long, choosing this type of layout may not be a good idea.

source: https://secure.wufoo.com/signup/1/

• Right aligned labels: this is one of the most used layouts nowadays. It allows an easy association between label and input field, however the labels’ readability is reduced.

source: http://www.linkedin.com/

• Left aligned labels: because labels are left aligned, their readability increases. That’s why this type of layout is used on forms that require users to pay extra attention on what is being asked. This layout has the disadvantage of being difficult to associate label and input field.

source: Gmail

2. Validation and errors

Validation and errors display is a must on every form, however you must be careful on how you present it. Regarding validation, presenting feedback as data is entered is usually the best approach. If it’s clear and concise, it provides a very good contextual feedback. But be careful to not overdo the validation. Use it only on fields with potentially high error rates.

Errors occur when the data entered is not all valid. Errors must be avoided by using inline validation and/or help tips. However they eventually occur, and when that happens users must clearly know where and what is the error and how to fix it. The best approach is to place a block on the top of the page with a list of the errors or/and, on the form, highlight the fields with errors (usually with a red contour).

source: http://en.wordpress.com/signup/?blog=1

source: https://www.linkedin.com/secure/register

3. Success or Error messages

One of Nielsen’s 10 Usability Heuristics is Visibility of system status. This heuristics says that “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” Success and error messages serve exactly the purpose of providing feedback to users about the form submission. For example, if you just bought something online you want to know whether your order was well submitted or not. That’s why that on the end of every form submission users must see some success or error message, usually accompanied by some illustration.

Besides the topics I cover on this post, there are other issues you must take into account, like, for example, form styling. In an era where design is so valued you mustn’t present forms like a set of text and boxes. You must beautify the form so the users feel the magic.

Useful resources:

• http://www.viget.com/advance/password-fields-are-annoying/
• http://dzineblog.com/2009/11/18-impressive-web-form-validation-scripts-to-enhance-user-experience.html
• http://www.lukew.com/resources/articles/web_forms.html
• http://www.stcsig.org/usability/topics/forms.html
• http://www.alistapart.com/articles/sensibleforms
• http://www.formsthatwork.com/Home
• http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
• http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/