An Eye On Design

Alex Souza's Blog
Home » Archive by category 'design'

A Temple A Day

May 29th, 2010 Posted in design, development, mobile Tags: , ,

[Disclaimer: This blog has no intentions to be a definitive opinion on Lua or Corona development. It is just an opinion, under the perspective of a non-professional developer, working for the first time with both technologies. If you find anything wrong with the expressed opinions, please feel free to comment and I will revise the text.]

Few minutes ago I upload my app for Apple appreciation. I hope to see it published at the App Store in the next days.

app 

Final interface.

Now, that this is finished, a final report on the application and Corona.

The Good

Ansca Mobile’s Corona is an infant SDK with lots of potential. It is much easier to code in Lua (interpreted language) than Object-C, or even Javascript (again, this is a personal opinion, based in my personal experiences).

Corona’s team are great people (have you ever received an email from a company’s CEO, trying to help you to solve problems? Yes, Carlos Icaza sent an email asking me if he could call my cell phone!), and they are working hard to have a great product.

Beta 2 has been updated every week, bring not only new features, as well as solving past issues. I am really excited to check the new Game Edition.

The samples they provide are also an excellent help to speed up your coding.

The Bad

Although Corona has been updated constantly, it does not have all the features the full SDK offers, meaning you cannot develop some apps like the ones you get from the App Store. Also, the current Corona SDK has much more potential for games than applications.

Specifically about A Temple A Day, I had to cut down several originally planned features, due the lack of some controls (mostly table view and asynchronous http request, for example). Fortunately, I could change my original idea to something doable but, consequently, I had to price down it.

Conclusions

If I had to develop a “regular” application again (and I plan to do it in a near future), I would probably spend more time with Appcelerator Titanium, instead of Corona. They are ahead in native controls. Unfortunately, I couldn’t “click” yet with their development tools and samples. Again, this is personal. I am waiting for the book they are writing about Ti.

Although, as of today, Corona is not that ready for apps in general, I am enjoying a lot to learn Lua, sharing experiences with the community in the forums, and planning my first game. The SDK may not be that strong for reference applications but, it really rocks when game is the main subject. As I mentioned above, I am looking forward for the Game Edition they are building at this moment.

If game is your “thing”, Corona is ready for you. Don’t wait and buy it with the special introductory price of $99, getting the Game Edition in this price. If you want to code apps with native controls, wait a little more or try other SDKs like Titanium or PhoneGap.

Myself, I will stick with Corona, keeping a closer look at Titanium progresses.

To the next app!

Alex

Updates on the app

May 20th, 2010 Posted in design, development Tags: ,

[Disclaimer: This blog has no intentions to be a definitive opinion on Lua or Corona development. It is just an opinion, under the perspective of a non-professional developer, working for the first time with both technologies. If you find anything wrong with the expressed opinions, please feel free to comment and I will revise the text.]

Last week, with the announcement of the new beta SDK from Ansca, I took a hard decision in reviewing my entire app (I had it 60% done), and re-start the coding, replacing the dozens of text files, for a SQLite database (thanks Ansca for bring SQLite to the SDK!).

I spent a few days reviewing the interface (check below how it is as of today), as well as handling some bugs or “unusual things”, that runs well in the simulator, but not in the device. For example, when user select a place, I get the place name, for example “Colonia Juarez”, as well as the file name for the place image (in this case “ColoniaJuarez”. In the same folder, I have the image files, which included “coloniaJuarez”. When running in the simulator, I got some warning messages informing that Corona “assumed” that “ColoniaJuarez” (the file name variable) is the same as “coloniaJuarez” (real file name), but the code ran perfectly. When I went to the device, I kept getting blank images. Now that I found the error, it seems a very simple thing but, I spent a few hours with alerts and “prints” trying to figure out what was happening.

photo_new

Buttons in the interface mean: 1) More options (which shows the last 3 buttons), 2) Call place, 3) Directions to place and 4) Share info. Blank (future) menu in the bottom will allow users to list places by name, sort a place and discover the closest place to visit

Lastly, I cannot say how grateful I am for people like Scott Powers and Mike Hart, from the Corona forums. They keep helping me with my questions, and this app would take much more time to be developed without them.

I will share some code in the next posting.

Alex

Moving forward with the app

May 11th, 2010 Posted in design, development Tags: ,

[Disclaimer: This blog has no intentions to be a definitive opinion on Lua or Corona development. It is just an opinion, under the perspective of a non-professional developer, working for the first time with both technologies. If you find anything wrong with the expressed opinions, please feel free to comment and I will revise the text.]

I had lots of progresses in the past days, not only with Lua, but also with Corona. I bought the SDK, which gave me access to beta 2. Although I am not using any features from the beta code, it seemed to be very stable and with good potential.

I spent most of my time setting the interface (portrait and landscape modes), also learning the correct way to align text (thanks to all support coming from Corona forums!) and positioning/animating my main icons. Here a list of situations I found:

- As I mentioned, my app has portrait and landscape modes. In landscape, users will see a full 480×320 picture rendered. In portrait, they must see part of the “big picture”, in 320×480. I couldn’t find a way to use just one big image and position it accordingly. At the end, my temporary solution was to use 2 images, one for each scenario. My main concern here is the total size of the application, as I am duplicating files;

- I found a bug in rotating the status bar (it does not rotate at this moment). Ansca already flagged this as an official bug (see the image below);

photo 

App in portrait mode, with full menu closed (see the arrow).

Checking the current design, plus considering my and Corona’s limitations, I have reviewed some features and changing a little the application scope. Also, getting involved with Lua, I decided to review some coding too (that’s why I am not posting it here). I am cleaning the current code and I will post an update late today or tomorrow.

Overall, I am starting to enjoy Lua and looking forward to finish this app, in order to start a new one (probably a game).

photo1

App in landscape mode, with full menu opened.

Up and running…

April 30th, 2010 Posted in design, development


As you can see, the main screen is based in the great interface provided by Bing app (I love it) and it is not final yet.

Today I progressed a lot with the new environment. Before to talk about the application and Corona, let me tell you that the configuration of the iPhone SDK is painful. Thanks to the manual from Corona I could finished all the certification steps and could build my first demo apps.

So, let’s talk about Corona. I installed the trial version (30 days). It works smoothly, just not allowing me to build applications for real (meaning sending them to Apple Store or save them in my phone without the Trial alert). I am planning to buy it in the next days.

I spent the first few hours today in my first app designing the main screen (see above) in the new Fireworks CS5 (I am running the trial version – too much money for the same month). After being comfortable with the button positions, I moved on to code.

The application (I can’t disclose very much) will target people interested in to know more about <places I cannot tell now)> around the world. Users will be able to call, get more info and even send pictures and stories about the places to the community site I will build.

In the next posting I will discuss my first hours with Corona and Lua.

Alex

I am a PC! And a Mac.

April 29th, 2010 Posted in design

images

My new notebook arrived yesterday. After spending a few hours installing software, here go my first impressions:

1) The “thing” is really beautiful. The design is very slick, the keyboard feels nice and the screen is really gorgeous;

2) I installed Parallels 5 and Windows 7. Parallels implementation is very cool, allowing you to run Windows in several different modes (from full screen to just some icons in the Mac dock). The integration with the dock is amazing: you can have Mac and Windows icons as they were in the same system;

3) I need to adapt myself to the huge track pad (I bought a Microsoft mouse – really good!, in the case I don’t adapt very quickly);

4) The worse thing for me was to discover you cannot “maximize” your applications. Yes, you have to resize them manually if you want them to work full screen, like you do in Windows. It is going to be a matter of adaptation but, I really love to double click a window to maximize it;

5) I installed also Office 2011 Beta (I can’t go further than that). It is really cool, although a little different than the Office 2010 I am accustomed to use daily;

About my mobile app development journey, I applied also for the iPhone developers program but I didn’t received my authorization yet. This is very weird if compared with Microsoft. Here, you do not pay to become a developer, neither you have to wait “up to 24 hours” to get access to the software you paid $108.41 bucks ($99 plus taxes).

As soon as I get access to the SDK, I will install Corona and report my experiences.

Alex

The Future of Interaction

June 15th, 2009 Posted in design Tags:

Few months ago I received an email from a Microsoft partner asking me to write about the future of interaction. What is next in this field considering the innovations that came with Microsoft Surface and Apple iPhone? was his question.

MICROSOFT Surface Computer

First of all, let’s remind that this blog is just a space for my personal opinions, not Microsoft. Also, being a personal space it allows me to talk about not only Microsoft products but ANY other products and interfaces I admire.

Touch interactions

Like everybody, I was amazed with when I first saw the iPhone and Surface. I had seen several projects using this kind of interaction in the past but, all of them restricted to an specific environment, many times requiring hard setups to operate. The beauty of Microsoft and Apple’s products is the fact they are, for the first time, spreading the technology to the world. Now, it is a commodity. Today, almost every cellphone has a touch interface, Windows 7 will embrace the technology (in fact HP has already a multi-touch screen computer running Windows Vista), Apple brought this to their MacBook touchpad, and the list goes on. As you already know, the concept is pretty simple. Touch whatever you want. Your fingers are in control.

This kind of interaction however is not the answer for every problem. Are you happing filling out long forms using the screen keyboard? Can you play your favorite but complex games using just 1 or 2 fingers? I am not, although I recognize the great job some game developers are doing with the multi-touch SDKs available.

What about voice recognition?

An older but very effective way to interact with machines is voice recognition. Have you seen how many progresses we had in this area? It is present everywhere, from your supermarket kiosk to every call center. Use your voice to command your intentions. To be honest, this is a technology I expect to see developers and designers using more in a near future, specially when the voice recognition engines become more friendly to other languages than English. Don’t you think it would be nice to talk naturally, as we do in real life, and have your results back?

Motion capture

The progresses in motion capture technology have changed the motion picture industry and they are close to do the same in the game industry. Can you image to animate Gollum or a dinosaur using stop motion animation? No way!

The concept is simple: 1) define some control points in the object to be animated, 2) using a camera, capture the object, 3) with a software, discover the control points in the image and 4) process the results.

A great example is the Wii Remote, although they use a different kind of motion capture (some accelerometer controls send the position of the control to the console that triangulates the positions and replicates it into the games). No more 515 buttons in your joystick! Move your remote and you are done!

Although I like the Wii concept, I am not a fan of their games (I think they lack in graphic quality), neither of the model (ok, I am against the world, you may say) of interaction. I never like the idea to use special glass to be immersive in a virtual reality game, or any other kind of device. They are simply not natural and for me, the Wii remote is very similar to this model as you have to wear the remote (the Wii Board is cool thou!).

One thing that brought my attention lately is Project Natal, from Microsoft (to be honest, I know as many as you about this project). The idea (using the basic principle I mentioned above) is to capture player movements using a camera attached to XBOX 360. No need to wear any kind of device. Do your moves and the software does the rest. Are you curious about that? See the first public presentation at http://www.joystiq.com/2009/06/11/video-project-natal-invades-late-night-with-jimmy-fallon/

So, are these technologies the future?

Fact is we use all our 5 senses to interact with the real world. No current technology alone is providing yet the full immersion we would like to have. Touch is not the answer for every problem, neither is the Wii remote or even Project Natal but we have to agree they are great steps for the future of interaction.

With these public technologies we are already covered in touch, vision, audio. Now it is time to see what is coming for smelling and flavor detection. Wouldn’t you like to taste some food and maybe have all the ingredients detect by your tongue? Can you imagine being at home, tasting a good cheese or wine and have their name or brand automatically detected? Or just say to your computer: Please buy me the cologne I am smelling now.

Futurology apart, the advances in interaction technologies are amazing. Expect to see in a near future deep interaction like the ones you have visiting installations in several museums, where you can not only see, hear and touch things but also smell the environment. Imagine to play a game where you can smell the fear? It would be nice, no?

Stop imagine! Download the available SDKs and start to change the world!

Bing! A designer evaluation

May 29th, 2009 Posted in design Tags: ,

Hello world!

Yesterday Microsoft announced its new search website:

Bing (formally know as Kumo) is a huge improvement in Microsoft in the search capability area, specially if compared to Live.com.

I have tested Kumo (I need to reset my brain to the new name) a lot in the past months, as we used it internally for any kind of search. And I have to say that the experience was pretty good, although I have never spent a minute thinking to compare it to Google or write a post about it. At the end, does the world need another search engine? For my surprise, yesterday when I asked for some ideas for this post via Twitter, a good friend of mine, working in Russia at this moment, replied me back asking to talk about Bing. So, Bing will be!

My review will be under the optics of the user experience. I am not an expert in search engines, neither is my intention to compare Bing against Google or Yahoo! technicalities in this post. If you want to find out more about these topics, bing them and you will see lots of articles about it.

The Name Bing

Let start this review discussing the name choice. According Steve Balmer, "We chose Bing because it’s short, memorable, and symbolic of the moment when information and opportunity come together and a simple search becomes an engine for taking action.". I agree that is easier to transform the word in a verb (as I sampled above, I will bing and see what it returns, like you google something) than the word Live. Particularly, I didn’t like the marketing strategy behind it. Remember, we are still going to have Live Messenger, Live Spaces, and so on but, our new search engine is Bing! The competitor has Google Search, Google Apps, and so on. Much smart, I think. But, I know Microsoft. Maybe the products names are going to change in a near future either (we are good renaming things :) .

My rating: 4.0 out of 5 stars

The Logo

I have mixed feelings about the logo. The color choice was an easy decision to the designers as blue and orange are complimentary colors, fitting always, no matter the logo design decision. What I didn’t absorbed yet was the font choice. Maybe they selected a “circular/oval” design to facilitate to play with the logo in special occasions like Google does during Christmas and other holidays.

My rating: 3.0 out of 5 stars

The Interface Design

I think Microsoft excelled here. The original Live interface was beautiful. The tweaks for Bing worked even more than the original. The daily updated pictures are gorgeous, specially now that you can see the previous ones, using the arrow buttons at the bottom right part of the screen. I know some people that come back everyday to Bing (Live and Kumo in the past) just to check the pictures. The new feature of find some information spots in the picture is a blast! Sometimes I forgot what I was looking for because I played a lot trying to find the image spots. Believe me, it is addictive!

image

It is complicate to evaluate a search interface, considering function will always be more important than the form. People goes to a search page to find something not to see pictures or anything else. But, my kudos to the new interface (not only the categories menu but mostly due the bottom bar with some interested suggestions and information).

The drawback of this interface (I couldn’t test it in a smartphone or iPhone) seems to be the time to download the images. I am looking forward to see how is the experience in a small screen.

I will cover the results page later on this post because I really think it is not only a result page but a good piece of interaction design.

My rating: 5.0 out of 5 stars

The Interaction Design

Ok, supposing you have success and stopped to play with the image spots, you did you search. What about the results? Take a look at this result page (in this case I search for American Idol. No, I am not Adam Lambert’s fan. I vote for Danny.):

image

The development team did a great job here in my honest opinion. Besides the Best match the really beauty comes from the category menu in the left side. What a great way to classify the information to the show fans! You can see it by episode, cast, quotes, and the list goes on! Try the News category and the update will surprise you!

image

My favorite kind of result is when you look for something close to you (a shop, movie, show, etc). See the results for the movie UP, from Pixar:

image

Very nice to see the best movie theaters near me but also the session times. Cool! Take a look also to the SEARCH HISTORY on the bottom part of the category menu. Really sweet have them at hands? I don’t know you but, many times I see myself looking for things I have searched few days ago.

Compare the same results from Google and you will see the interaction design of Bing is far better than the competitor (*the image below is an updated search done in June, 23. Google has done a good job updating the info although the showtimes are for a place I have no idea it is. Originally, the result did not show any showtime recomendation, which probably means Google had not recognized UP as a movie name):

image

My rating: 5.0 out of 5 stars

Overall

As I mentioned in the beginning of this posting, I am not capable to evaluate search algorithms or quality of results from any search engine. What I can talk about are the aspects of visual and interaction design, and for me it is clear that Microsoft spent much more labor hours in to improve the way people search and digest information than Google. Does it mean people will leave Google and Bing everywhere? Of course not! Google has established standards that are difficult to beat, they are integrated with almost every browser in the world besides Internet Explorer, and have a consistent history on search (how many search engines Microsoft brought in the past: MSN search, Search service, Search Server, SharePoint Server, Fast, Live, etc).

What I applaud in Bing is the tentative to establish a connection with the user. While Google is just about function: search, find and leave, Bing is about decrease barriers to users: search, find, digest, find more, enjoy, come back. This is a huge step forward to the search experience, and for me, this is great. I will bing more, will you? Let me know.

Alex

Book Recommendation

May 21st, 2009 Posted in design Tags:

This is a frequent topic after presentations: Do you recommend a book for topic A or B?

Before provide my favorite list, let me remind that I DO NOT receive anything from publishers or authors to recommend them. The list below is just a sample of books that helped me in past projects.

[Usability] Don’t Make Me Think from Steve Krug stills a classic. It is simple and very effective. You can read it in 1-2 hours and after that you will master the usability topic.

[Overall Design] Designing Web Sites That Sells from Shayne Bowman and Chris Willis. This one is hard to find now (really do not know why there is no more editions of it. It is beautiful and insightful even if you are not designing a commerce website.

[Interface] Designing Interfaces: Patters for Effective Interaction Design from Jenifer Tidwell. I have to admit I have never read it from cover to cover but it is a good companion when you need a reference about use or not a specific type of interface component.

[Project Management] Web ReDesign from Kelly Goto and Emily Cotler is a plus when you need to understand how to update a website, how to communicate well with your customer and also document your progresses.

[CSS] The Art and Science of CSS by Sitepoint Publishing. Quick reading, color samples and good tips on several topics like forms, menus, etc.

Can you share you list with me now?

Take care,

Alex

A Real Case

May 13th, 2009 Posted in design Tags: ,

As I mentioned in my last week posting, I would like to share some experiences I had supporting a friend’s project few months ago. I will focus only on how we worked together as a small team and I will also illustrate the way I designed the product from concept to reality.

The Project Goal

Create an innovative software to support dentists to pre-sale whitening treatments. It must be easy to use, not expensive, with features that excite patients to pay for whitening treatment.

The Team

Besides me (interactive/interface designer), a developer (of course writing the code) and a dentist (responsible for the whitening probability matrix). After one “in person” meeting, all other interactions were done via email or phone, with live checkpoints after finishing important milestones (I will cover them later).

Making things work

Although it was such a small team, it is important to highlight that three different backgrounds means different approaches to present and agree in things (for example, be prepared to work with more than one way of presenting things –the developer can understand some small sketches and thumbnails, the dentist will need a high definition mockup to perceive the same information), saying that, keep in mind the advice I gave in the first posting about users not being like you:

  • They do not have the same equipment you have;
  • They do not have the same education/specialization you have;
  • They are not interested in technical details as you do;

With the agreement of sharing info via email or instant messaging as need, the developer and I mixed the piggyback and parallel integration model. This mix is easy to implement in a small team (by the way this is one of the advantages of teams with such few members), although should be complicate to be implemented in the case of several designers and/or developers working together.

After the live meeting with the dentist, the decision was to create a product targeting whitening features. With this information, the decision was to lock the basic features as:

  • Create/Open Patient: allowing the creation of treatments based on new or previous patients;
  • Import of pictures: to be manipulated in front of the customer;
  • Matrix of whitening: a table with customer data that helps to estimate the rate of success of the treatment;
  • Teeth selection: tool to select the teeth area for image manipulation;
  • Pictures comparison: a list of patient pictures showing before/after results;

The Design Process

The development world is limited to the IDE they most use (my friend in this project was in front of Visual Studio for the entire project). Designers have much more tools to work with. We can sketch on paper, we have several graphic tools like Photoshop, Fireworks, Expression Design, etc, and recently, a bunch of prototyping tools like Balsamiq, iRise, GUI Design Studio (this is the one I have used most) and, in a few months, Expression Blend with SketchFlow (more on that in the future postings).

With the data that I had, plus the basic persona document I covered in the last posting, I started with my favorite tool: paper thumbnail sketching! This is the part of designing I love much. It is easy, free (in costs and responsibilities) and it clarifies any idea you have. Below you can see some of the thumbs I have used in different projects I have worked or will work a day, when I win over laziness. I couldn’t find any thumb from this particular project but it is ok, as thumbs should be disposable.

A Basic Thumb

Basic pencil and paper, just to block interface spaces.

thumb3

A little bit more of details, again in pencil and paper.

thumb4

Another interface blocking example.

thumb2

Several studies in pen and paper.

thumb1

Working with measurements.

Another great advantage of thumbnails is the fact they are understandable by developers too. In this particular project, I used them to defined the basics of the interface. With this info, the developer was able to start the design of the forms of the application (in this case the decision was to use Windows Forms instead of WPF due the fact most of our target customers are using some older machines), blocking interface spaces, being able to keep his focus on the image manipulation area, for example.

As mentioned before, our friend the dentist was not that “visionary” as the developer. Thumbnails and mockups (static image files) are good tools for designers and project members but, unfortunately experience shows that they are not good enough for overall users. To them, the best way to show something is thru prototypes.

Prototypes can be seen in several forms (search Wikipedia for example and you will see several different types). In order to keep this post not enormous, I will mention only LOW, MEDIUM and HIGH definition types.

A low def prototype can be done using only paper or PowerPoint. You sketch the interface in a paper (or in a slide), draw some buttons placing them on top of the first sheet you drew the interface and start your tests. Low def prototypes are good for testing basic interactions (by the way, conventional things like Login, Go Back, etc don’t need to be prototyped as users are already familiar with that –of course this not applies if you are building a new kind of login) although many designers are questioning the efficacy of this method as many end users are not able to fully understand them. Also, with the number of tools we have today to simulate interactions (PowerPoint included), it is worthy to spend a few more hours and build a medium or high definition prototype.

Some people disagree with the idea of medium def prototype. To them, anything more detailed than a low def version is a high def by definition. To me, high definition prototypes should be done only in more advanced phases of your project (you will read my real example in a minute or two). The concept of medium definition I use is something that has interactivity with a known interface that allows the user to navigate without further instruction (although in most case the interface graphics are far from the final).

When I had to show my concept to our dentist, I created a “medium” definition prototype using GUI Design. If you install the player they provide for free, you can see the first interaction I built (to see better, after open my project, right click and disable Annotation Tool Tips). You can also see the documentation file the product generates, which helps a lot the development process.

After seeing the prototype, our friend the dentist was convinced that some features were not making sense, like the idea of having a gallery with different pictures of the patient. According him this process occurs only one time. This info was very interested and supported me in the decision to move the original patient data menu from the right to the bottom of the interface.

The next step was to build the first mockup of the interface, as you can see below.

firstMockup

As you probably notice (the dentist did) the interface is totally different than the ones he was familiar with (almost all dentistry software have a Windows Form like interface). Being a designer, I explained him the decisions on the colors (gray is a neutral color that do not compete with the photo colors. If I had use white as background, patients would not be that impressed with the new white color in their teeth, for example), and the bottom position of the menu (my studies showed me that patients seat in the dentist chair look for a monitor positioned on top of their heads, making the top part of the interface the most important to them). Positioning the menu on the bottom (not the standard pattern) allowed the dentist to work freely with the menus without having to trail the mouse over the patient picture, which would cause a distraction to them. The way it was designed allows the patient to be focused only in their mouth).

patientView

A few reviews helped me to select the final color palette and menu positioning. With this mockup, the developer was ready to implement the code and build our first high definition prototype.

colorMockup

The decision to make a high definition prototype varies from each project. In our case, we decided to make it as our intention was to validate if this kind of software would have acceptance or not from potential customers. Basically we would like to validate the concept with real dentists and collect their perceptions. Would they buy it? Our high def proto had only the main feature done (the teeth selection and the whitening results according the Patient Data selection), optimized for a single photo. Also, in order to make things quickly, I used free icons available in the web to build the interface (to be honest, I am not a good illustrator and to draw icons for me is painful).

With this prototype we collected good feedback from our users and my friends decided to GO with their product. I did some tweaks in the interface, making it able for our first usability test.

advancedMockup

The results of the usability session were interesting as several things we judged “cool” (remember the importance of having a good persona document and keep your development always thinking in her/his?) were considering distractions. Also, things that we thought were not that important appeared as a must have to the potential customers. Another round of improvements (now I had to draw every icon…) and the software was ready for the last usability test.

final

As you can see, the final interface was pretty close to the original mockups.

finalInterface

The total project time (from the first meeting to my last sent icon file) was around 3 months, which I think was a nice time considering my, and also my friend’s, part time involvement, 1 medium, 1 high definition prototype, plus 2 usability sessions.

Some learning includes:

  • More time dedicated to your persona definition means less re-work in further development phases;
  • Sketch as many thumbs as possible. They are like visual brainstorms (there are no right or wrong). Thumbs helped me to position the main menu in the bottom, making the interface very unique;
  • Establish a formal way of model integration (define file names, shared folders, feature sheet, etc) before to start your project;
  • Do NOT spend much time in Photoshop or Visual Studio (or whatever is your favorite graphic/IDE tool) in the initial phases of your project! Agree in features first, plan, mockup than prototype!
  • Approach end users with high definition (or at least medium def) prototypes. Low fidelity prototypes are great for the development team only;
  • Involve designers and developers since the begin. It would be very difficult to me to fix the interface flaw I mentioned early, if the developer had locked by code all the elements of the UI.

I hope this posting have brought some good ideas and concepts to you. Let me know your comments!

Alex

Do you REALLY know your customer?

May 4th, 2009 Posted in design Tags:

<<INSERT IMAGE>>

I know, you are probably thinking right now: “Alex is getting crazy! Of course I know my customer and my project audience!”.

No, I am not crazy. Fact is most user interfaces fail because they were not thought to be used for the right audience.

Customers tend to believe that their products have broader audiences than the reality. How many times have you asked your customer about their target website and have heard back “every person”? Sometimes your customers just don’t know about their real audience. In other situations, they are defining to you their dream customer instead of the real one.

Let me share a real case I had few years ago while I was teaching a user interface course in Brazil. One of my students came with a sample multimedia application and asked me to evaluate and provide him some reasons why the sales were not that good, although his product was very innovative.

Even before to load the cd in my notebook, I asked him about the project and his target audience. He briefly explained me that he was scanning top model (or girls trying to become top model, to be precise), shooting a video with them, and transforming the photos+video into a multimedia cd. Going further, I asked him the most simple question: who do you think is you target audience? He then promptly replied me: “models trying to sell their photo book in a digital way”.

Unfortunately, my student was wrong (as many of us are in several projects). He was thinking with his marketing side of brain. His potential buyers were the top models but, his product users were the agency owners/recruiters/beauty hunters which, sadly, didn’t use at the time (I don’t know if it change today) computer to view a photo or video book.

This simple example illustrates the importance of having a detailed persona page (or multiple persona pages if your application/website target is more than an unique kind of user), with the characteristics of a fictional target user.

Basically, the persona page has a profile with information about your real potential user. You can detail as much data as possible in this document. Things like gender, age, hobbies, equipment they use, etc. When built, this sheet must be shared and used by all team members, as a guidance during the development stages, helping you to keep focusing in the right people instead of bring unnecessary features to the end user (for example, maybe it will be not a good idea to have a multi-touch component, although it is brand new and cool, if your persona sheet tells you that your target user do not have a touch screen monitor).

Here go some tips on how to create your persona pages:

  • Find your real user group first (in my student case, the main group was people related to the top model business);
  • Separate potential buyers from potential users (using the same case above, top models were buyers, agency owners were users). Marketing strategies, and the overall user experience can contemplate a potential buyer persona, but it is another topic. For development, we will need only the user persona page;
  • When you agree about the correct user, create his/her persona sheet with as much details as possible. The first ones will may sound strange (I had problems with my first ones also, as I thought they were unnecessary due the fact I was convinced I knew my user) but they will be a valuable resource for your team and specially to your project managers, when your developer or designer come with a “very cool” feature that can delay your project in two weeks. Just reply them: is it targeting the persona we have? If yes, lets discuss, otherwise, keep the idea for a future project;
  • Deep down on the persona sheet. Try to answer questions like what is his/her equipment? how they use it? Is there any particularity in their work environment we should consider?
  • Share the sheet and make it mandatory during development phases. Again, the more detailed it is, less chance of change your specifications.

This a persona page sample I used while helping a friend’s project few months ago (my entire participation in this project, from conception to designing the final interface will be covered in the next topics, in order to illustrate how small teams of designers and developers can work together without major issues).

Let me know your thoughts and experiences using personas. Do they work for you? What you like (and dislike)?

Next topic: A Real Case