UX is not UI

Uncategorized

8x11

source:http://www.uxisnotui.com/

Advertisements

Personas

Uncategorized

Below you will find a few elements that I find useful when compiling personas.

The benefits of Personas

  • The benefits are summarised as (Cooper, 1999):
    • Help team members share a specific, consistent understanding of various audience groups. Data about the groups can be put in a proper context and can be understood and remembered in coherent stories.
    • Proposed solutions can be guided by how well they meet the needs of individual user personas. Features can be prioritized based on how well they address the needs of one or more personas.
    • Provide a human “face” so as to focus empathy on the persons represented by the demographics.
  • Help us to better understand our users behaviours, attitudes and motivations.

To be used in Epics/Scenarios.

Objectives are to identify a x persona to be used in the development of x. 

Actions:

  • Identify 6 junior x people who will be willing to take part in our research.
  • Check with the Acc Manager that there are no known issues on their accounts before contact.
  • Contact via phone and send follow up email if required with more information about what it will involve.
  • 50 pound Amazon voucher approved as incentive.
  • Research the users / accounts before the scheduled call.
  • Schedule a suitable time to contact for the phone interview.
  • Document the findings from the call.
  • Collate the findings when all 6 interviews are complete.
  • Present the finished personas to the team / company.

To be found out before interview

How often they visit the app

How many users on the Acc

Support cases that might be relevant from Salesforce

How long have they used our application?

How often do they use our application?

What tasks do they use the application for?

History with Company

Why did you first choose x?

When and how did you first heard about x?

Why did you first interacted with x?

If they accomplished that initial goal in x and why or why not?

What were your first impressions?

Did you trial x first?

What were your impressions of x before making that first purchase?

How about after your first purchase?

Personal Info

Gender? – Find out first

Age?

Location?

Job Title?

Briefly describe your role?

Years in current position?

Education Level?

If applicable, what did you study?

In what Industry do you work? – Find out first, confirm

Size of organisation – Find out first, confirm

Size of department

Domain experience and knowledge

How would you describe your knowledge about x?

Tell me a bit about what you do: industry, business size, role, and so on

Can you walk me through your average day?

Do you work remotely or in office?

What other Web apps you’ve used for completing your daily tasks?

When and how often do you use other web apps?

What do you like/dislike about the other apps?
Familiar Technologies

What operating system do you actively use? Work/personal  – Windows 7, Windows Vista, Windows XP or earlier, OSX, Linux, Windows 8, Other (please specify)

What kinds of setup do you actively use? Work/personal  – Desktop w mouse, Desktop w trackpad, Laptop with external mouse, Laptop with trackpad, Other (please specify)

What is your monitor setup? Work/personal  – Single Monitor, Dual Monitor, 3 Monitors, 4+ Monitors

What desktop browsers do you actively use? Work/personal  – Chrome, Internet Explorer, Firefox, Safari, Other (please specify)

How many email addresses do you have? Work/personal

What email client do you use? Work/personal  – Outlook, Thunderbird, Gmail, Osx mail, Other (please specify)

What mobile phone do you own? Work/personal  – iPhone, Android, Windows, Blackberry, Other (please specify)

Which tablets do you own? Work/personal  – Ipad, Android, Kindle, Blackberry Playbook, Other (please specify)

How do you most commonly use your tablet(s)? If applicable

What instant messaging platforms do you use daily? Work/ personal  – Gchat, Facebook, ICQ, Jabber, Skype, AIM, MSN, Other (please specify)

What social media networks are you on, and how do you use them? Actively contribute/ Just consume/ Don’t use it  – Google+, Facebook, Twitter, Linkedin, Yammer, Instagram, Pinterest, Other (please specify)

Do you have an intranet and if so what is it?

Do you actively use any of following sites/SaaS products? – Jira, Confluence, Salesforce, Google Docs, Google Calendar, Office 365, Dropbox, GotoMeeting / Cisco Webex / join.me, Flickr, Wordpress / Drupal / Blogger, Others (please specify)

Goals and behaviours

What did you do on your most recent visit to the app—step by step

What is your typical process when visiting the app, workflow etc

Do you focus on one thing at a time, carrying it through to completion, or are there a lot of interruptions?

Why do you use our product in the first place?

Which features or content do you use the most / least and why

Things you’d like to do on the app but can’t

Things  you wish were easier or different

How, when, and why do you use a different channel instead of x  (email, phone, physical location, etc.)

What types of projects have you used x for? – check app first, give examples

What’s your typical process for a project like this? (planning, content,  graphics, approval, send)

What is involved with each step of the process (As above)

Have you used the app to create your own campaigns? What did you think of that experience? – find out first, confirm

Have you ever called or emailed x? For what? How did that go? – check salesforce, confirm

Attitudes and motivators

How you’d describe x to a friend

What would influence you to use x more

Overall, how would you describe what it’s like doing business with x? (adjectives)

What do you like best about x?

What do you like least about x?

When you complete a task, how important to you is easy-to-use (from 1, not at all important to 5, extremely important)? Why?

Is there anything else that’s important to you?

Do you get emails from x? – find out first – Are they useful?

Do you use the success community? Do you find it useful?

Do you feel like you have a good sense of everything that x offers?

Opportunities

How they respond to new ideas/features/content that the app is considering

How often they would use the new features, and why

Of all the things discussed, what the most important improvement is

Are there things you can’t do with x that you would like to do?

Is there anything else that would make your life easier?

How likely would you be to use the following things if they were available? (List of features to test)

Have users walk you through their typical process. Give them an open-ended question and let them talk for as long as possible. Slow them down and have them cover every step.

To be used to help reinforce phone conversation above, to be sent as a survey

How often do sign into x?

Daily, weekly, monthly, never.

How tasks do you complete on a monthly basis?  

Do you collaborate with anyone else when completing a task  and if so can you describe your role?

Gender

Male

Female

Age

16-20

21-30

31-40

41-50

51-65

Location

Job Title

Briefly describe your role

Years in current position

<1

1-2

2-5

5+

Education Level

If applicable, what did you study?

In what Industry do you work?

Size of organisation

Size of department

Do you work remotely or in office?

What operating system do you actively use? Work/personal

Windows 7

Windows Vista

Windows XP or earlier

OSX

Linux

Windows 8

Other (please specify)

What kinds of setup do you actively use? Work/personal

Desktop w mouse

Desktop w trackpad

Laptop with external mouse

Laptop with trackpad

Other (please specify)

What is your monitor setup? Work/personal

Single Monitor

Dual Monitor

3 Monitors

4+ Monitors

What desktop browsers do you actively use? Work/personal

Chrome

Internet Explorer

Firefox

Safari

Other (please specify)

How many email addresses do you have? Work/personal

What email client do you use? Work/personal

Outlook

Thunderbird

Gmail

Osx mail

Other (please specify)

What mobile phone do you own? Work/personal

iPhone

Android

Windows

Blackberry

Other (please specify)

What tablets do you own? Work/personal

Ipad

Android

Kindle

Blackberry Playbook

Other (please specify)

How do you most commonly use your tablet(s)?

What instant messaging platforms do you use daily? Work/ personal

Gchat

Facebook

ICQ

Jabber

Skype

AIM

MSN

Other (please specify)

What social media networks are you on, and how do you use them? Actively contribute/ Just consume/ Don’t use it

Google+

Facebook

Twitter

Linkedin

Instagram

Pintrest

Other (please specify)

Do you have an intranet and if so what is it?

Taking into account all companies you deal with, how often does it feel like you’re asking someone for support?

Daily

Weekly

Every couple of weeks

Monthly

Hardly ever

Please rank how you get support from companies: Often/ occasional/ tried it once/ never

Phone

Email

Live Chat

Twitter

Facebook

Online form

Forum

In store

Do you actively use any of following sites/SaaS products?

Github

Jira

Confluence

Salesforce

Google Docs

Google Calendar

Office 365

Dropbox

GotoMeeting / Cisco Webex

Mint.com

Flickr

MailChimp

WordPress / Drupal / Blogger

Others (please specify)

Do you use password management? (LastPass, KeePass, OnePass, etc)

Would you like to partake in future usability studies to help us improve our software?

Possibilities

Why did you choose our product over other solutions?

Price

Design

Customer support

Features

All of the above

Other, please specify

Please rate your satisfaction (very satisfied, satisfied, neutral, dissatisfied, very dissatisfied) on the following items:

Customer support

Features

Design

Ease of use

What do you value most in our product?

Are you somehow dissatisfied with our product?

What do you like least?

Would you recommend our product to a friend?

What is the single most important feature or improvement you would like to see in our product?

What kind of improvement of a feature would attract you to use our product more often?

Further reading

http://uxmag.com/articles/persona-grata

http://www.usability.gov/how-to-and-tools/methods/personas.html

http://www.ux-lady.com/diy-user-personas/

https://medium.com/@paulfarino/archetypes-not-personas-2e32c8306112

http://www.interaction-design.org/encyclopedia/personas.html

http://uxmag.com/articles/using-proto-personas-for-executive-alignment

http://www.measuringusability.com/blog/personas-ux.php

http://www.uxmatters.com/mt/archives/2010/10/using-personas-during-design-and-documentation.php

http://whenittakesmorethan140.wordpress.com/2012/10/15/uxpersonaresearchsurveyresults/

http://www.uie.com/brainsparks/2012/07/20/whitney-quesenbery-the-characteristics-of-effective-personas/

http://boxesandarrows.com/files/banda/long-live-the-user/Mulder_TheUserIsAlwaysRight_Ch3.pdf

http://www.gorilla-ux.com/2014/03/24/dynamic-personas/

Tooltips become Coachmarks

Blog

Tooltips offer UI designers the reassurance that even if there is some ambiguity as to the function of a link, label, button or call to action we can sleep easy in the knowledge that we can add a tooltip with additional information to reassure our users that they are making the correct choice. Tooltips should not be used as a primary source or information but more as a secondary source to supplement icons and labels etc to help our users better navigate a section of our design.
Tooltips in mobile and touch interfaces can sometimes be accessed by the first tap displaying the tooltip and the second actually executing the action however this can be cumbersome and is not always preferable. Another way to add this additional information to a mobile device is through the use of coach marks. A nice overview can be seen here on pttrns.com. While coach marks should be used selectively they are a great way to either initially introduce a user to an interface features or to demonstrate that there is additional functionality available.

 

 

Microsoft Megathon Malaga 2013

Blog

This weekend I took part in Microsoft’s Megathon which was held in the technology park in Malaga close to where I work. The aim of the weekend was to design and create an application in 2 days and then via peer voting the winner of the competition would be elected, and we won!

I was partnered with two very talented JavaScript developers, Victoria and Carlos, and we decided to create an application for Windows 8 using HTML5 and JavaScript. There were over 60 developers present and we were the only ones who decided to use this technology.

 

20130414_153557

We developed a social shopping application whereby the user can create and share wish lists, for example wedding or birthday that can be shared among selected friends, who then in turn can via paypal split the cost of the item among themselves or mark an item as purchased so that you do not receive duplicate gifts.

As this was my first experience designing for Windows 8 I researched the guidelines and Microsoft provide very clear UX guides which can be viewed online here.

After we figured out the inital information architecture and created a quick wireframe I started writing the HTML5 and CSS front end of the application while the developers got started working on the JavaScript backend code. For me this was a challenging task as I have not worked in Blend before, and after several attempts trying to re-position items using Blend I changed my mind about using Blend and just coded directly in Visual Studio and then built the application and ran it every time I wanted to check the progress, possibly not the most time effective method but one that worked out just fine for me.

Another issue I had was debugging, I have to admit that if an element is slightly out in a web app/site I just open my developer tools in the browser and can quickly identify which elements need to be fixed and then fix it. Windows 8 apps don’t seem to have this functionality added.

When I had created the HTML5 and CSS then the developers added the functionality with JavaScript.

There were some other really strong contenders at the event, namely Flippa created by a team of my colleagues at CSC and BabyTube which also contained a team member from CSC. Overall a really strong presence from my UX team with all of our members who participated placing in the top 3.

Web typography

Blog

I recently discovered webtypography.net which I would recommend to anyone who has to design any interfaces for web based applications.

This area of UI is often overlooked and in my opinion a good baseline grid, the choice of web font and good punctuation cannot be highlighted enough.

 

Typefaces

Everyone has their typefaces of choice and it is normal to have a couple of good old reliable s for every situation but here are a few that I will be considering for my next project as highlighted by Billy Whited in blog.typekit.com.

Another super cool site I have found that does some amazing web typographical experiments (think chrome experiments for web fonts) is webtypographyforthelonely.com I especially love the opening interactive image.

A good starting point for web typography is Scott Gilbertsons talk that can be viewed below.

Baseline grid

Both Smashing Magazine and A List Apart give amazing overviews on the benefits and problems encountered with implementing a baseline grid so I am not going to repeat what they say so much more eloquently.

So here is what I have found to be my baseline grid of choice. fluidbaselinegrid.com
This is to quote their blurb:

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

Not only does it provide a solid baseline grid but it also used normalize.css as a reset to render all browser elements the same.

It also uses respond.js as a polyfill to fix the pesky issue of older IE versions (6/7/8)  not recognizing media queries.

Yet another handy feature is the inclusion of a fluid column system for responsive design, similar to responsive.gs or goldengridsystem.com.

And yes before you point it out the headers are not perfectly aligned, but this is something you can go back and fix manually if you are creating a static interface and if not, well then I am sure you are aware of the difficulties of creating a perfect baseline grid in a responsive manner with dynamic information.

IMAGE$68CFECD5FAE4B58D

LESS, CSS preprocessor

Blog

I have been using LESS for a while now and recently I had to amend my friends code which was written in plain old fashioned CSS, and I realized just how much faster having a CSS preprocessor as part of my workflow has made me. SO MUCH FASTER.

If you have not already started using one I would strongly suggest looking into it. There are a few different ones out there, the most popular of which seem to be LESS or SCSS (formerly SASS)

Both allow you to create variables, nested variables, Mixins, Selector Inheritance and Functions & Operations with the main difference (that I can see) being that SCSS needs Ruby installed where as LESS does not.

SASS has Compass an open-source CSS Authoring Framework and LESS has Elements a basic set of LESS mixins to start your project.

I also use Crunch as an editor and to compile minified css. Oh and on a complete side note if you ever need to easier understand or work with messy, illegible css check out Processor, it will have your code looking amazingly pretty in no time.

Both have solid communities behind them so which ever you chose is up to you, but if you have not tried working with one before I would highly, highly recommend it!

Font Icons, my new favorite thing!

Blog

I recently discovered font icons and I have to say I simply love them!

The benefits of using them are amazing, they are easy to resize without losing quality, and using CSS you can easily style the opacity, shadow, colour and when browser support gets stronger the gradient also using background-clip.

Chris Coyer gives an awesome tutorial on how to use the correctly on css-tricks here.

There are a number of free font icons available for use on the web or you can simply create your own in illustrator, save your icons as SVG and use a service like icomoon to create your icon font.

As they are loaded as a font in your CSS it cuts down on HTTP requests and saves on file size over image sprites so these will be especially useful for when you need to design for reduced bandwidth or a mobile site.

Flash and PD

Uncategorized

I never thought the day would come but here it is. I agree with Steve Jobs. Flash must die. It is evil. It has sucked hours of my life away and given very little in return and even when it does decide to play nice it invariably comes with the message: “Please upgrade your flash player now” However I am not here to rant about Flash I am here to explain the difficulties in getting it to communicate with PD… So here it goes.. As part of our workshop class this semester we studies Flash, PD and Arduino, and for assessments we need to demonstrate that we have a solid understanding of these projects as well as create a prototype of our FYP. Now you would think that this would be pretty straight forward as Pure Data and Arduino are both open source and aimed for artists so how difficult can it be?

So first things first I open up pd and get some really nice stuff going, a toner, random sounds being generated and converting sound through my mic to midi/ audio. They still visually look crap though so I thought I would create a nice flash interface for them so first things first I went to good old google and typed in flash interface pure data.

Ok so then it is possible to do PHP to PD without using OSC. Sweet. Only its not really because I have no idea how to program in PHP and as the kind person mentions in there post this is not exactly fool proof either unless it updates every half second or so.

So after a couple more hours of trawling the net I came across flashserver developed by Olaf Matthes which is a pd extension. Sweet I though, an extension is exactly what I need. Only it is no longer available to download and while it is available at Local Disk (C)>Program Files>pd>extra>flashserver  there is no support or documentation as the library is no longer supported by PD.

So that leaves me with FLOSC which is a mix between Flash and OSC. It is available to download here. It is techie and geeky and not very easy to follow but It does work. You need to define your ports based on the below taken from benchun.net


"java Gateway oscPort flashPort

where oscPort is the port where flosc will receive OSC packets (the UDP port for it to listen on), and where flashPort is the port to which Flash clients will connect (the TCP port you’re using in Flash).”

It is not easy and you do need a good grasp of networking to get a hold of the general gist but it does work. Further info can be found here on the OSC site.