The Pam

UX Job Recruiting: What's it about?

2011-10-31T14:51:00.000-07:00

I just recently got myself involved with the whole recruiting process of my company and I must say it's been a really interesting experience. Not something I'm very fond of doing, but something very interesting indeed. Even if I'm not really into the whole Human Resources area, there is a lot of value in how you select the people that enter your team.

My team is now growing slowly, but effectively I hope. And I wanted to share some of the strategies I put in practice for this purpose. A lot of it is new to me, too, so feel free to share your thoughts on it.

What you should look for in a prospect

I know it's an obvious remark, but I still gotta say this: He/she must have a killer portfolio. It's always an effective filter, since you can not just measure their work on quantity, but also on quality. Their way of thinking and organizing ideas is clearly visible not just in their past work, but also in the way they've put it together for a presentable portfolio. Getting a .ZIP file full of JPG images is very different from getting a PDF or a link to a personal website.

Are you a fan of social networking? This is where it all comes into play. Personally, I'm not very fond of doing this, but I recently found this infographic on the subject and it got me thinking of the value behind it. How about checking their social media presence? I ended up checking some of their blogs and it was a nice addition to what I'd already learned from them.

Then of course comes the interview. Interviews are the final breaking point, because then not only is their professional experience important. I've identified these following factors:

Their enthusiasm is a key aspect of their qualifications. They should enjoy themselves doing what they do!
The way they interact with you. If you are going to be working with them, there should be a favorable interaction between the two of you. Are they open-minded? Are they introverted or extroverted? Do you see them in a team with you?
Can you maintain a conversation easily with them? And I mean, other than about the weather of course. They must be willing to speak their minds about the stuff they'll be dealing with on a daily basis.
They should be self-confident. And I don't mean self-confident to a point where they start being obnoxious because this is a big minus. Self-confidence involves knowing what you're talking about and saying it in a way that demonstrates you do. That doesn't involve repeating 'I this' or 'I that'.
Their future aspirations and goals. Do they fit in with what you have in mind for them?

What you as a recruiter must accomplish

What? Of course there's also the stuff you need to impress them with! You're not only evaluating them, you're selling them the idea of working with you. And this isn't just something I asumed, but something I've personally experienced being on the other side of the coin.

When I was a full-time developer (oh, those days...) I had the misfortune of going to the must stressful and degrading interview I've gone to in my life. I'm not going to say where it was, of course, out of respect. But they were so mean to me that, even though in the end I convinced them I could do the job, they'd already convinced me not to work for them. The money didn't even matter to me after that, even though it was well payed considering the experience I had back then. They'd asked me uncomfortable personal questions, the team leader had almost barked at me and stared at me doubtfully during a painfully long session of question-answer, and the place was creepy as hell. Needless to say, even after they called me back a few times trying to convince me, I was the one who rejected the offer.

In short, we need to convince them as well. How?

You should be friendly. This should be obvious but... well, if you read my story, it isn't always like that.
Let them know you enjoy your job. They must understand that, if they work for you, they'll enjoy it. It shouldn't look like something they'll hate waking up for every morning.
Be clear and specific about everything. What will they be doing? How does your team work? What are the abilities required from them? What benefits do they get for working with you?
Don't turn the interview into a good cop/bad cop drama. You can get the data you need without being rude or pushy.

I hope this helps, good luck with your future recruitments!

New Projects for November

2011-10-30T21:25:00.000-07:00

Hi everyone! And sorry that again I've been away from my fabulous blog (I still love it even if I can't post on it, I've worked so much on it!). But I assure you it's been for good reasons.

Let me elaborate on my new projects:

I opened a new blog! I wanted to work on something in spanish, given that it's my first language and I have a considerable audience that speaks spanish. It's a little different from this one and I decided to make it on Tumblr because of the dinamics. It's called Diario de Usabilidad (Usability Diary) because it'll consist on small, daily tips learned on the job. I hope I can share useful stuff with everyone.
I'm a busy speaker now, I was invited to my old college to give a special talk on mobile design this coming Friday, and next November 10th I'll be part of the chosen speakers on the event held at the UANL (local government college) for the World Usability Day.
At my office we'll also be starting a new project for design and development bootcamps! So locals, stay tunned to my new blog where I'll be announcing everything.

How's that? Of course this blog will remain, for more elaborate, non-daily posts. Just be patient with me :D

Blogger's new iOS app

2011-09-08T13:00:00.001-07:00

I can't tell you just how excited I was to hear about the new Blogger app! I literally read a tweet about it, downloaded it an started writing this post!

It's a fairly good approach, I must say. It has very simple design, which is appropriate since you, as a writer, don't really want anything getting in your way. After you choose the blog you want to update, there's a listing of all your blog posts you can easily update with the now-so-popular scroll-down method.

One can directly choose whether to view, edit or delete a post through said list by using the right-hand side arrow. I must say, though, its size is a tad bit inconvenient. That is one difficult tap because of the arrow being so small.

I loved the posting form, it reminds me of the one provided by Tumblr's mobile version, which I have always found very enjoyable to use.

All in all, it's a good UX for a first version, if you grant them that listing detail. I think I'm going to start using it a lot, that might increase my number of updates.

This post was partly written using the Blogger app, by the way. And I say 'partly' since the app doesn't let you arrange images. You can attach them, but not arrange them. It just pastes them at the end of the post, one after another. But most of the work could be done through the app, so simple posts can be accomplished.

Additional note: I didn't notice right away, but the app also seems to have issues with special characters used for the title (like the one I'm using for this title in particular). Something to look out for.

What are your thoughts on it? Have you tried it yourself?

Starting with HTML5 and CSS3: Two Books Away

2011-09-07T08:16:00.000-07:00

My complete knowledge on HTML5 and CSS3 had been with my previous coding experience with JQuery Mobile, since the library implements both. I still didn't have the concepts quite clear, though. I chose to get started with a couple of books that are available at the A Book Apart store.

I could just go ahead and say 'buy the red one and the green one' but I think they deserve a more insightful review, since they have proved to be so useful.

HTML5 for Web Designers

What I loved the most about this book is that it helped me understand each and everyone of the new markup tags, not just their overall functionalities, but also their specifics. The book provides very in-depth comparisons between how something is commonly done and how something can be more easily or efficiently done through the use of HTML5.

Most importantly, though, it maintains a cross-browser mentality. Of course, many of us already know HTML5 is still not supported by a lot of browsers (and, surely enough, again most of our problems begin with an I and end with an E, if you know what I mean). Hence, this book is always providing alternatives for the non-supported features of HTML5, focusing on the specific browser that ignores each tag and how to overcome that situation.

All in all, it's worth reading it not only to learn how to use HTML5, but also to stop fearing it. If you need encouragement to start working with it, then this is the book you should go to.

CSS3 for Web Designers

I could vaguely say that the same review applies. It fully explains and details the new features of CSS3 (though not all of them, but its scope is more than enough for starters).

What makes this book unique, though, are its examples. Every explanation comes with a practical example. I was lucky to have enough time to sit in front of my laptop with the book and code each example as I read about it. I can assure you it works pretty well that way. If you can't do that, it will become a useful reference anyway, for when you actually need to code something along those lines.

A complement for this book is the one I reviewed last month on Responsive Web Design by Ethan Marcotte. Dan Cederlholm's book doesn't cover media queries, but Ethan's does. Read both of them and you'll be all set.

By the way, two great books are coming up at the A Book Apart store: Designing for Emotion by Aaron Walter and Mobile First by Luke Wroblewski. I'm a big fan of both of them, you can bet anything that I will be buying those books as soon as they're out next month.

UX Lessons with SpringPad

2011-08-18T09:31:00.000-07:00

Now and then we all bump into some application that makes our lives brighter and easier, so why not talk about it? We can always learn from what they're doing right.

And I want to start doing this by talking about SpringPad

If you're anything like mw, with a bunch of bookmarks scattered everywhere, you probably took up the task of searching for the right online tool that can make those bookmarks available for you everywhere.

But it doesn't end there.

Don't you have wishlists, notes, pictures, and task lists scattered around too? Really, what's the point of using a thousand apps to organize all of it when must of the time they're related?

That's where SpringPad comes into action.

The big picture is just that. The SpringPad application allows you to store any of those in organized folders. It also allows you to share stuff with your friends on SpringPad, sticking to our current social paradigm.

But there's more.

Going mobile - Of course there's a SpringPad application for your phone. It's the exact same experience as on the web, which is already very pleasant. No more steps on either one of them.

Adapting it to your browser - There's also an alternative to quickly add stuff to your SpringPad account via your browser. By adding a special bookmark, you become fully integrated with SpringPad's options, not only for bookmarking but for events, alarms and tasks as well.

Also, if you want the full functionality integrated to your browser, you should switch to using either Firefox (why would you do that?) or Google Chrome (please do that!). There's an existing plugin/extension for both of them.

An easy-to-use interface - Tasks on SpringPad are pretty simple. In one, two steps at the most, you can add content and organize it.

Fully customizable - Customizing your accounts makes them feel more like 'home', doesn't it? SpringPad allows you a very limited, but very sufficient amount of customization that makes everything look like its yours (changing your background image, adding an avatar, creating a profile, giving your folders specific colors). This customization extends to your mobile and browser extension experiences, too.

I know all these statements make it sound like I'm getting paid to promote this app or something of the sort, but I just really enjoy finding such a useful application, specially one that solved many problems I had at once.

What other applications have saved your life lately?

When we 'asume the user knows'

2011-08-12T09:34:00.000-07:00

I'll confess I'm an Amazon virgin. Why?

Now, don't look at me like that. I know it's weird, but I just enjoy bookstores too much. Nevertheless, when a book's not there, it's not there, and I decided I'd give Amazon a try.

Since I was a first-timer, after deciding to start the check out process, they asked for me to register, which is actually a very fast step. It's fast... but it could be better, wouldn't you agree? I just happened to encounter a tiny problem...

This may not seem like much of a problem at first glance. Well, no, now that I think about it, it does even at first glance! Let's review in a more obvious kind of way...

I asumed it was because my password didn't have any numbers or special characters in it, but... is this really the best way to let me know? Of course not.

It was, in fact, because of the lack of numbers. But I'm a user that quickly asumed that. I can bet you a lot of money my father would've been staring at the screen for a really long time. And he is used to buying stuff online.

This problem, though, is not an e-commerce specific scenario. It's the password, after all. But looking a little beyond the actual data, we can see it's a problem generated by lack of information.

Is it really too difficult to include something on the lines of 'Your password should have numbers'?

There's a link that leads you to tips on how to create a password, but the word 'tips' doesn't imply obligation. It implies suggestion.

And I'm asuming it was because of the numbers... and not because of the length.

Really, now that I think about it... was it the length?

We need to avoid confusing our poor users like this. Correct vocabulary, choice of words, and, of course, enough information (just enough) are key aspects of our site's communication with the users.

For the record, the rest of the check-out process is very user-friendly. I liked it.

The Pros and Cons of Responsive Web Design

2011-08-12T07:07:00.000-07:00

As you probably read on the last post, I just recently finished reading Responsive Web Design by Ethan Marcotte. And, in risk of repeating myself too much, I think it's one of the best web design related books I've read so far. If you still don't know what I'm talking about, you can read Ethan's introductory article on the subject.

But, even though responsive web design seems like a very impressive approach, is it always the right solution to your task at hand?

We should remember that it's never just about implementing the latest design trend there is. Before thinking about investing time, money and resources on responsive web design implementation, we must consider the following:

Does it align itself to our site's objectives?
Do our users expect the exact same of the website when they visit it on mobile as when they do on their computers?
Do we have the resources to do it?
Do our time schedules allow it?

I'd like to review a couple of statements against and in favor of its use

Reasons to consider Responsive Web Design

One solution to rule them all - Admit it, having a single version of a website that works on every screen width and device is a pretty great deal. It will not only be benefical for the users, it will also be easier to maintain afterwards.
Avoiding device-alternating issues - One of the main downfalls of building both, a desktop version and a mobile version of a site, is the fact either way the user is likely to share the URL, and the person who opens that shared link isn't always using the same device through which it was shared. Responsive web design avoids this effectively.
It's not just about the device - Even if we have a very large screen, we don't always have a full-screen sized window open for the web browser. With a responsive web site, even if the window is resized, we never end up with that horrible horizontal scroll.
Attacking media display issues - Of course, a responsive website has to consider resizable media, in formats that can be viewed from every device.
Designing for mobile first - By now, I'm sure everyone is familiar with Luke Wroblewski's motto of designing for mobile first, which is something we are practically forced to do while implementing responsive web design. This way, content that isn't really needed by the user is avoided in the final result.

Reasons NOT to consider Responsive Web Design

Development times and resources - Building a responsive website has its complexity. Do you have the time (considering your previously established delivery dates) to do it correctly? Are there people on your team capable of doing it or do they need training? Do you have the time for that training?
Cross-browser compatibilities - HTML5 and CSS3 are very powerful allies for building a responsive website, but we all know that there are still many compatibility issues regarding these languages. Alternate ways of achieving the same results may be necessary, which brings a new issue to the list...
Loading times - Internet connection on mobile devices is still a greater issue than on common computers, which brings this topic to the table. Responsiveness requires extra server calls due to cross-browser and cross-platform compatibility issues (yes, we are back on the IE topic). Media alternating also needs additional server calls, or else resizing a huge image everytime will also result in slower loading times since the same 700x700 image is still loaded on a 320x480 screen.
Different devices, varying objectives - The objective of the desktop site (often informative as well as functional) is not always the same requested of the mobile version (often just functional, and not to the same extent of the full website). This makes it necessary to work on different versions for each purpose.
Image resizing restrictions - Image resizing is a very important topic for responsiveness. But think about advertising. There are pre-established sizes for web advertising, and resizing or croping ads may result in harmful distortion.

So, as for every other available solution, the conclusion is that you must judge it for yourself. Consider every aspect of it and of your current project. Is it what you need?

A Couple of Books You Should Read

2011-08-11T12:56:00.000-07:00

Really, just because you haven't heard of me, it doesn't mean I'm floating around in some river. I swear. So don't worry too much (though I appreciate it if you do). I've been up to my neck with stuff to do... and in need of some free time. But I've missed my blog for way too long.

Anyways, during those free periods of time I was able to finish reading a couple of very good books. I want to share brief reviews with you in hopes of convincing you of reading them yourself, since I can guarantee you they'll be of great use if you are a web designer or developer.

Content Strategy for the Web by Kristina Halvorson

I know it took me like forever to finish reading it, but I finally did and I'm very fond of it. This

book is not just about the complexity of the process that content design and selection represents, but also about its importance, starting from the basic concepts revolving around it.

What I personally enjoyed the most was the inclusion of a very important (but also very commonly overlooked or ignored) concept: content auditing. Of course, who would have thought you not only needed to create new and great content, but also review the existing one? You can see why common sense is the least common of all senses. I specially loved what Kristina had to say on the subject.

To summarize, this book presents a whole new, more complete and accurate way of looking at your site's content. It's also very engaginly written, with lots of information that won't bore you or tire you.

Responsive Web Design by Ethan Marcotte

It's very new and fresh information, and Ethan has a very clear and to-the-point way of sharing the responsive web design philosophy.

Of course it gets technical, with a whole lot of CSS styling information, but it's fully explained and

detailed, relating everything to a very nice-looking and simple example. It's the sort of book that doesn't involve passive reading. I would recommend that you read it and follow along the instructions of the various exercises, for better understanding. Specially the chapter on media

queries.

To sum up, I'd say it's an eye opener in many ways I used to view the development process. But it's also very clear on not making you biased. Responsive Web Design is not the only solution there is, and this book doesn't say otherwise. But it does highlight the benefits very neatly.

So? Will you read them? I hope you make plans for them, you won't regret it!

Building the Future of Technology

2011-07-24T11:10:00.001-07:00

Sorry for the lack of posts, guys, work is getting the best of me. I've taken a habit of getting back home and forgetting all about the computer, at least until I get a hold of my nerves again.

Still, that doesn't mean I've run out of things to share.

I don't know about you, but I'm amazed at how technology keeps evolving on a daily basis. Even more so, given that current existing technology is already amazing enough, I'm surprised every time I learn about a project that describes visions of the future technology. I recently shared the Rimino Project with you, which by the way is my favorite so far, but it's not the only one currently out there.

Today, I want to share with you a list of videos that describe these future technologies.

Nokia Morph Concept Mobile Phone

Intel UMPC Vision of the Future

Adaptive Path's Charmr Project

Nokia 888 Design

The Future of Screen Technology

The Pros and Cons of Working with JQuery Mobile

2011-06-21T09:54:00.000-07:00

I’ve been working with the mobile web (either designing or front-ending, I tend to do both) for almost four months now and I’ve learned a great deal in that time. One of the many things I’ve learned from has been the use of the JQuery Mobile framework for mobile web experience implementation.

As you can imagine, after almost three months of having used it, I can tell you a few pointers that will help you decide whether JQuery Mobile is what you’re looking for or not. As always, there’s no definite answer.

Let’s start with the good things

JQuery Mobile saves you a lot of time with positioning, responsiveness and visual details. Why?

It helps with positioning because you can use its specific attributes to arrange stuff inside the page, thus saving time with not having to bother yourself with the width percentages and all that. Plus, there is even a pre-arranged way of implementing the 960 CSS Grid!

You also save a lot of time in taking care of responsive design, since JQuery Mobile makes your layout adapt to the changes in size, also taking care of details like hiding the address bar of your web browser.

It saves you time with visual details because it comes with a default CSS style sheet that lets you alternate between ‘themes’, that is, color palettes you can apply to your layout. You only need to call these themes via a specific letter associated with them. This applies not only to small elements like buttons and icons, but also to the entire header, footer or body background. You can also use easy-to-implement page transitions, so that your panels hide or show in a more native-looking way.

Another great feature of JQuery Mobile is that it actually helps you understand the basic usage of HTML5. If you take a look at the documentation and wander around the layout structure section, you’ll find it implements the data attribute provided by the HTML5 markup. Little by little, you’ll gain more understanding of it by just using the framework.

Its panel exchange structure is also a very good side of using JQuery Mobile. You are able to have many single-purpose “pages” inside the same HTML document, which saves you trips to the server. You can have a simple website built in a single HTML file.

So how’s that for starters? Sounds pretty neat, to be honest. And I’ve taken advantage of many of its features, but...

There’s stuff we should consider against it

I’m personally very fond of JQuery Mobile, but I’ve found certain criteria that have made me decide against its use sometimes. Let’s talk about them...

First things first: Performance. Importing the JQuery Mobile library, alongside its CSS file, generates new calls to the server, therefore making your application slower. If you want to avoid this, you’ll need to further synthesize these files with your own scripts and CSS files.

Another thing is that the styling provided by the framework is loaded with gradients and rounded corners. So what if your design doesn’t have any? You ought to find ways around this styling... or decide against using the framework at all, since breaking its normal functionalities makes it a little more troublesome than it should be.

I’ve also had a few problems with the way JQuery Mobile formats elements such as dropdowns (well, mainly just dropdowns). What it does is change the element for a list, which not only makes the interaction a little awkward (after many tests with users, we’ve encountered the pop-up list of options doesn’t always respond correctly), but it also makes dynamically loading content into the dropdown not as straight-forward as it normally is.

Well? What do you think? Is JQuery Mobile what you’ve been looking for? I hope whatever the answer is, you find the solution to every mobile project you’re working on!

Keep in mind, though, this article wasn't written considering the latest version of JQuery Mobile, which is out today. I'll write a revised version as soon as I have the time to get my hands on the newest version.

29 Ways To Stay Creative

2011-06-21T06:46:00.001-07:00

Browsing through the entries of Laughing Squid, I bumped into this little video. It made me think how there are tons of simple stuff we don't do and how these little details can really help us out in our daily lives, not just personally but professionally as well.

Watch it youserlves and decide. How much of this are you currently doing? How much are you neglecting?

29 WAYS TO STAY CREATIVE from TO-FU on Vimeo.

I, for instance, can tell you I don't sleep much. And I don't really get away from the computer very often. I'm going to make a bigger effort.

The Future of Mobile? The Rimino Project

2011-06-19T12:15:00.001-07:00

This was a very special revelation to me, and that's because I'm always at awe everytime technology takes a leap forward.

Even though I find our current mobile experiences to be great (maybe we need some speed improvements, but it's actually pretty good), this week I bumped into a new project to improve them yet further. I gotta say it blew my mind. Will this be possible in the near future?

Watch the video and find out about this new experience proposal. And go to the project website to read more about it.

Rimino - A Human Touch on Mobile Experience from Amid Moradganjeh on Vimeo.

Recent Accomplishments and Future Plans

2011-06-11T18:31:00.001-07:00

Hello everyone! I'm doing a better job now keeping up with the blog, right?

Anyway, I wanted to share something with all of you.

Yesterday afternoon, coming home from the office, I found myself with some great news: the new SG (Software Guru) magazine is out! My copy just came in the mail! And you know what? It's got an article written by me!

You want to see it? I've got some pictures:

I know, I got carried away, but I was just too excited! Oh, and sorry for the mess, it's my room...

Well, it's the second printed material I've managed to produce in the last year, and I'm very happy with it! The first one, if any of you don't remember, was for the Search Marketing Standards magazine, winter edition. So now, I've got a printed article in english and a printed article in spanish.

This means a lot to me, since being a published writter has been my dream since I was in grade school (yeah, I'm that much of a geek).

If any of you speak spanish, you can read the online version of my most recently printed article at the SG official website.

So what now? On with another dream, of course! I'm going to keep writting for the SG magazine, at least for a couple more editions, but I'm also hoping to be elected as a speaker for their September event: the SG Expo at Mexico City. I would appreciate it if you would vote for me, of course, if you are assisting to the event, since you need to sign up to vote.

Thank you all for your support up to now!

How to Design a Website Online

2011-06-10T12:38:00.000-07:00

Nowadays, with the existing variety of online applications, many of our daily tasks can be handled without the need of a pre-installed software on the computer. But can an entire web design process be carried out without desktop applications?

It is not always easy to get access to the necessary or preferred software packages, so knowing what online alternatives are available can go a long way on the completion of everyday projects.

Documentation

Every correctly executed design project should be accompanied by some documentation to back it up. This project document can also be taken care of entirely online.

Evernote

For simple word processor activities, Evernote serves the purpose well. With a simple rich-text editor interface, it's able to easily get the document managing task done.

Google Docs

If Evernote’s functionality proves to be insufficient, Google Docs takes care of any additional document requirements. Apart from every word processing functionality included by Evernote, Google Docs can also aid in the creation of spreadsheets and presentations, with the alternative of either sharing through e-mail, online collaboration, or exporting to many of the known formats.

Wireframes and other necessary diagrams

As an extension of written documents that serve as back-ups for all decision taking during the design process, wireframes and other diagrams illustrate these outcomes more clearly. These are only some of the online tools currently available for the task.

Gliffy

Although Gliffy has a very limited UI element library, it serves as a multiple-purpose online diagram tool, allowing the creation of various other types of diagrams, such as flowcharts.

Balsamiq

Being a tool dedicated to wireframing, unlike Gliffy, Balsamiq’s application provides a greater variety of UI elements (for both websites and mobile apps), in a sketch-like type of environment. Mark-up tools are also at hand, for further notes and highlights.

Mockingbird

In contrast to Balsamiq’s interface, Mockingbird works with straight-lined UI elements for wireframe construction. It also allows the creation of multiple pages in a single related project. Unlike Balsamiq, though, Mockingbird doesn’t support the wireframing of mobile apps.

Mockflow

Mockflow, aside from having many similarities to Mockingbird in working with straight-lined elements and multiple-page projects, is an even more powerful wireframing tool. Its advantages include a wider variety of UI elements, the option of choosing a pre-established template, and wireframe support for various mobile OS apps and Facebook apps.

Color palette generation

Colors are a very tricky decision for a web designer. Luckily, there are many tools online that can make this process a lot simpler.

Color Scheme Designer

For guiding designers through the process of choosing the correct color palette for the project at hand, this tool provides many different visualization options. Among those mentioned, there are two very effective preview options that allow the user to view the color palette applied to a simple website layout, as to give a better idea of how the colors will look like (in lighter tones and darker tones respectively). In addition to this, it gives the possibility to export the created color palette to various different formats.

Color Hunter

Being a lot simpler than the Color Scheme Designer tool, Color Hunter creates a palette based on any image uploaded by the user. It’s a fast solution to color choosing and it requires a lot less expertise.

Kuler

Combining the best of the previous tools, Kuler lets the user either create a color palette from scratch based on the common color schemes (like Color Scheme Designer does) or generate a color palette based on an existing image (like Color Hunter).

Image editing

From the creation of a small banner to the construction of a complete page template, an image editor is the most powerful ally of a web designer. And what happens when the web designer doesn’t have access to any of the applications included in the Adobe Suite? That’s when online alternatives come to aid.

Aviary

The Aviary image editor is part of a larger family of online editors, such as editors for audio, vectors and color. It has a very clean interface and even though it doesn’t include as many tools as other editors do, it’s easy to use and it even provides the user with a starting example of what can be accomplished through its usage.

Pixlr

Reaching up to Aviary’s functionality, Pixlr’s tools go farther with the inclusion of more option windows (very similar to the ones handled by Adobe Photoshop), more image filters, and the option of language selection for international users.

Sumo Paint

The added value of using Sumo Paint is the possibility of working with its many new and fun drawing tools, like the mirrored brush, the pointy star tool, the rounded-corner star tool, the pie chart tool, among others. Apart from this, the Sumo Paint editor comes with a swatches window, not included by any of the tools mentioned before.

Sketchpad

Even though Sketchpad has a more limited amount of tools and functions, its pattern and shape selection tools are very handy additions for quick detailing. The user interface is also a lot friendlier than the other tools’, since it only shows the option windows that are absolutely necessary based on the current tool selection, toggling them on and off screen as the designer works.

Font Selection

Visualizing fonts that will be the correct fit for a website is not always a straight-forward process. The following tools offer the type and style previews needed for this particular task completion.

Font Picker

With a very friendly interface, Font Picker provides a long listing of fonts for the designer to choose from. The user is able to change the text displayed by the fonts in the list and, based on personal criteria, just start eliminating the ones that won’t work, checking and keeping the ones that can be used. This way, Font Picker allows the user to easily build a list of viable fonts to use.

Type Navigator

In contrast to how the Font Picker tool works, Type Navigator asks the user for traits belonging to the ideal font, and afterwards provides results that align to said specifications. Additionally, Type Navigator includes links for learning more about each specified font and purchasing.

CSS Typeset

CSSTypeset has a different functionality from the tools presented before. With this web tool one can analyze the appearance of larger amounts of text with certain properties applied, like line-spacing, letter-spacing, and other CSS styles.

What internet users should expect with the rise of HTML5

2011-06-08T08:04:00.001-07:00

There has been a lot of controversy and information about what the increasing presence of HTML5 will represent for web developers and their current way of dealing with web projects. It has also been acknowledged as a very positive improvement for numerous reasons concerning said subject.

From the user’s perspective, though, there is also a lot that can be mentioned about what the implementation of the HTML5 markup will do to the way everyone’s used to interacting with the web. The following facts explain what current users should expect of these changes.

No more plug-ins needed

What has been regarded as the best advantage brought by the implementation of HTML5 is the eradication of video and audio plug-ins with the introduction of markup elements to replace them. This means that, as HTML5 becomes stronger, users will no longer be stopped by inconveniences such as the need to install Quicktime, Flash Player or Silverlight to view this type of content.

Contrary to the popular belief, though, HTML 5 does not totally eliminate the reason of existence for these software packages. It makes them unnecessary for the online content viewing, but there are still other appliances they can be used for. The biggest controversy had been the supposed battle between HTML5 and Flash, but there’s hardly a battle when the reality is just a rearrangement of the roles they play. Flash still has its good points, which sadly won’t reach all of the mobile audience as expected.

Shorter loading times

Since there will no longer be a need for third-party processes to load online graphics (not only video or audio, but images and interactive elements as well), users will be able to view web pages a lot faster than before. This fact will hold greater possibilities for graphics and interactions inside each page, also considering the fact that no plug-ins will stand in the way as was previously mentioned.

Less cross-browser viewing problems (in time…)

HTML5 will bring web standards to a whole new level, making it easier to overcome cross-browser differences, meaning that it won’t matter what the browser of preference is, content will be displayed the same way always.

This is still not entirely true, however, as Internet Explorer (up until version 8) is still incapable of correctly displaying HTML5 elements. Nevertheless, there are currently some existing coding projects looking to overcome this problem, which makes HTML5’s positive future a lot brighter and closer.

An increase on mobile compatibility

Going back to the plug-in situation discussion, being able to stop depending on plug-ins also means being able to reach mobile devices a lot easier. Internet users will easily visualize everything from their mobile devices in the near future (even if the device of their preference turns out to be an Apple device), without worrying about the appearance of disturbing icons like the infamous question mark in a blue cube.

With the help of HTML5, web applications and games that can be now built with its new features will no longer be unavailable on mobile devices, bringing a whole new level of online interaction to the hands of mobile internet users.

To sum up

The mayor goal of building a web site, tool or application is reaching as many users as possible once it’s been completed and released. If all goes well, HTML5 will help us accomplish this in a near future, eliminating barriers that currently keep users from interacting with web content the way they would like to.

Working ads into your mobile design

2011-06-01T13:34:00.000-07:00

Yes, everyone hates ads on their apps. We hate ads everywhere. But when it comes down to sponsorship interests, we as designers have to live with these ads whether we like it or not. So what to do, then?

First things first: Consider regulations and standards.

The standard sizes for web ads are very popular, but did you know there are standards for mobile, too? You should check out the guidelines provided by the Mobile Marketing Association and get updated on the subject.

Not only does it provide complete explanations, it also provides sizes and samples of all the available ad standards, including character counts for text ads.

Positioning: Avoid tap mistakes!

I am an avid user of deviantArt. But their mobile web version used to always make me click on the ads by mistake while I was trying to edit my messages.

They changed that, though, and I'm grateful for it. Now, instead of taking you directly to the ad, clicking on it overlays a button that says 'Go to ad', so you have to click on it twice for you to be taken out and redirected to the sponsor's web page.

I would rather place the ads over the menu, though, or not as close to it (some padding would help).

Last week, during the Seattle stop of the Web App Masters Tour, Luke Wroblewski said something about this, quoting data from Harris Interactive:

47% of mobile users tap on ads by mistake

You may also want to read the MMA guidelines on this regard, since they mention creative design considerations for ad placement.

Alternatives: Whole-page advertising

Maybe it's not an option on mobile web, but what about native apps? I've seen this done and, even if it's a larger display, sometimes it makes it far more elegant and discreet.

When the app is loaded, for example ElNorte.com's mobile app for iPhone (a regional newspaper), the app displays a whole-page advertisement, entirely designed to suite the sponsor's requirements, which then elegantly flips back to the app. This is presented while the next stage of the app is done loading.

So what's your take on mobile advertising? I'm still testing the best solutions myself, so I might let you know of new discoveries along the way.

My Notes on Jared Spool's presentation – The Essential Principles behind Great Design Principles

2011-05-24T16:12:00.000-07:00

As a perfect end to this fabulous event, our host Jared Spool talked about the essentials behind the design principles we apply to our individual projects. I personally really liked it, I think it was a great way to wrap up.

Here are my notes on it:

We need to provide clear copy explaining any hardware problems that may have occurred to avoid the user further trouble.
Design principles established by Dieter Rams.
Innovation isn’t saying yes to a hundred things, it’s saying no to a thousand things – Steve Jobs.
Speaking about how IBM’s design principles fail to be actually useful as reference, and how Windows’s design principles have turned out to be quite effective.

The success is based on the focus of their principles – How do we tell if our designs are getting better.

Field research should involve everyone on the team, not at the same time. Everyone can learn how to do field research and teach how to do it.
First you should let the stakeholders present the top priority projects.
After this comes the creation of personas for the project.
Personas are fake because they combine characteristics of different real like users.
Scenarios are created after personas and their individual common goals.
Looking at personas and scenarios, principles can be summarized.
Using principles to explore design – Creation of mini briefs

Project statement – design goal
Select personas – who is the design directed to?
Select scenarios – what the design will have to do
Select principles – what will tell you you’re doing well

Using principles to critique design – critique is a two-way process:

What you’re trying to accomplish
How you’ve chosen to accomplish it

And that was it! Hope my notes were useful to everyone! And now I'm back to reality and back at the office on Thursday (because it's going to take me all of tomorrow to get back home), but I'll keep updating with the relevant news of mobile field as frequently as humanly possible.

My Notes on Mike Lee's presentation - Designing a Strategy for Organizational Transformations

2011-05-24T14:35:00.000-07:00

Almost at the end of the event and it was Mike Lee's turn to illustrate us on the internal strategy of AARP towards going mobile. Overall very interesting data, although I didn't really know how to write it down, and I'm sorry about that because he had a lot of interesting insights to share. I think my notes don't do him justice.

Nevertheless, here they are:

Drive traffic in with SEO, media and other publications
Push content out through social sharing and cross platform presence.
Channel integration can get really messy, with a lot of patching along the way as the number of platforms increases.
People at AARP have a limited US audience, so that limited their adaptation needs.
Their current use of SMS is limited to tactical purposes.
Currently working with a small mobile team and an external vendor.
Didn’t wait on mobile because of how slow things tend to move anyway inside a huge organization.
Established an arrangement of teams in order to cover their users’ experiences and the needs generated by them.
They use web site components such as JSON calls for news feeds and members login.
The applied APIs include Twitter, Facebook and Bit.ly
A marketing strategy was to create a trivia challenge, which was promoted through mobile articles and increased traffic to the main site.
Created a digital member card for login members.
AARP has launched both Android and iPhone applications.
They’ve encountered barriers with senior users.
Thinking about the multiple devices available and their increase of use.

My Notes on Luke Wroblewski's presentation - Designing Mobile Web Experiences

2011-05-24T13:55:00.000-07:00

So we're almost done with the Web App Masters Tour, just two more presentations to go, and I don't want to sound biased when I'm saying this but Luke's was, to me and because of my current focus, positively the best presentation up to now. I was so excited to listen to all this immediately appliable stuff!

Thanks to Luke Wroblewski again for sharing all that information. It was also very nice meeting him on a more personal leve, he is a great guy.

Here are my notes on his talk:

Use of PCs decreased 20% most likely because of smartphones and tablets.
Sign-ups on mobile are important! 16% of Twitter sign-ups are via mobile.
A mayor use of Facebook and Twitter is done through the mobile website
Consider mobile capabilities like location detection
Start using new coding technologies
Embrace mobile constraints like limit of space and variation on signal availability
Mobile use cases

Lookup/Find
Explore/Play
Check In/Status
Edit/Create

In mobile, you should design navigation first, content second
Keep navigation minimal, give content all the attention on the screen
Every time you assume somebody is not going to do something on mobile, they do.
Don’t dumb stuff down for mobile
Navigation elements – Should be kept to a minimum and maintained in the simplest form possible. Sometimes the best solution is as simple as an anchor link.

Avoid fixed navigations on web, there’s no right way to do it: You have to sacrifice performance and it’s really hard to accomplish.
Avoid back buttons, they’re always already someplace else and will end up confusing users.

We generally have partial-attention users, and partial attention requires focused design.
Have clarity and focus on the really important elements of your content.
Care about touch-based interactions – even BlackBerry and Nokia are heading there now.
The recommended minimum size of touch targets is 44 pixels.
No hover menus on mobile

Are these elements important enough? Put them on screen
Require an on tap action
Bring them out on swipe
Make it a separate screen
Or just drop it!

Hover CSS covers devices with indirect manipulation.
Set a viewport to create a better experience.
Try not to use images, take advantage of CSS3.
Think in terms of fluid layouts: Your users can flip their device and your layout must adapt to this change.
Reduce your elements; it makes things simpler for everyone on your team.

My Notes on Kate Bringham's presentation – PatientsLikeMe: Adventures with Data Visualizations

2011-05-24T11:29:00.000-07:00

Kate's presentation was a very interesting specialized topic. It was very interesting to see how they handle health data, mainly because I really had never thought about health data handling at all. It's very delicate and complex data and I really liked how people at PatientsLikeMe are doing things.

Here are my notes:

Eight out of ten users look for health information on the internet
The goal at PatientsLikeMe is to make people know what they can do about their state and how.
It’s important to make it easy for people to create data

Easy to answer questions with no jargon
You can’t always make it extra simple, but you don’t always have to ask too much information.
Let people use their own meaningful language

Highlight the benefits of sharing data – Let users know what they do on the site is worthwhile.

For every piece of data that is asked, something can be given to the user in return. (example: answer the ‘I have’ question to find patients with your condition).
Patients can see themselves in context and find out the degree to which their symptoms are common.

Help people use data to answer their questions

PatientsLikeMe helps people know the outcomes of different actions they can take regarding their state.
People can learn through the experiences of other people.
People can end up answering questions they never really thought to ask in the first place.

Don’t be afraid to experiment

Be willing to fail while trying stuff you’re not sure about.

My Notes on Steve Portigal's presentation - Design Fieldwork: Uncovering Innovation from the Outside In

2011-05-24T08:59:00.000-07:00

I really liked Steve Portigal's presentation, it was a ver insightful description of how fieldwork should be handled and considered.

I also remembered some of the procedures of my previous job and I was actually very surprised to find out how much of it we had been doing wrong. Can't really change that now, since I've got a different job at a different company, but it was still really interesting for me to know that.

Here are my notes:

Use more than one method; integrate them for your general process.
You don’t get the same kind of knowledge from a market study graph than from actually observing users, but you can use both of the results.
Innovating goes farther than just solving existing problems.
Satisficing refers to acceptance of good-enough solutions.
The knowledge “You’re not your user” creates empathy, but going out to the field makes you listen and understand what your users are going through.
Through fieldwork you can detect unmet business goals.
Doing fieldwork can accomplish many research goals at the same time, not only about the users but also about your organizational goals.
Web analytics is never as descriptive as actual fieldwork
Fieldwork should be used through the usual development cycle.

At the beginning, to find out what you should do, what users need.
In the middle, to make sure you’re doing the right thing
Afterwards, to find innovation opportunities

It’s important to have the knowledge of what you currently know and what you want to learn through your research.
Plan and execute your research.

Who to talk to? Recruiting users for the study, creating contrast to reveal key influencing factors.

Consider the many existing types of users.
Considering demographics is secondary

What to do with them? Selecting methods to obtain the information you need through your study.

Don’t directly ask people what they want, engage them in activities like participatory design or role-playing.
Create a document to guide your session, even if you’re not going to follow it exactly.

Fieldwork
Do something with the data – analysis techniques

Avoid jumping to conclusions
There must be a clear distinction between your interpretation and what the user actually said. Both are important.

On a related subject, and for the spanish speaking audience, I recently published an article on the Software Guru magazine about defining persona profiles that could be helpful when executing the first part of your research (selecting your users). It's a printed article, but you can also view it digitally.

If you're interested in knowing more about the Web App Masters Tour this year, Luke Wroblewski has been publishing his notes too and they are much more detailed than mine. You should check them out.

My Notes on Julie Zhuo's presentation - Data-Informed Vs Data-Driven Design

2011-05-23T17:01:00.000-07:00

Facebook has to be one of the most interesting applied examples that can be presented because of the hug number of users it currently has.

I had the opportunity of listening to Mark Trammell talk about Twitter on last year's Web App Masters Tour at Philadelphia, and now I was able to listen to Julie Zhuo talk about Facebook.

Here are my notes on what she had to say:

Data helps us understand how products are used and how they can be improved
Photo uploading had been outsourced and the code was a mess. It wasn’t reliable and it was poorly designed.
Facebook redesigned a very cool experience of photo uploading but it wasn’t that accessible for users because of the need to download a plugin – Only 34% of the users tested were successful
Change to a more native feel, with a simple workflow, increases 11% of success rate.
Data can be used to sanity check changes to a product

The composer example – changes in the main status update process in an attempt to increase sharing.

Qualitative data also has a value in these tasks, but it’s mainly for understanding how users feel.
You can spot specific use cases that are common with the interaction between your users and the product

New moms are a very intense use case amongst Facebook users.
Enterprises that want social media presence are also very active users. Not only big companies with social media departments, but also small companies with lesser knowledge of it.

Growth of Facebook users – Process fragmentation can improve the experience

Sign-up process fragmentation brought a 3% increase in sign-ups (which is equivalent to 9 million more users a year, the size of the population of Sweden).

Deactivation process – Giving it the feeling that your friends on Facebook will miss you reduced the deactivations by 7%, which is equivalent to 1 million users a year.
Facebook created a team focused on user engagement.
Reads and writes were the first statistics considered, but 85% of them are generated by the 20% of the users, which rendered them not as useful as defining data.
They believe real innovation invariably involves disruption – The news feed addition was hated at first, but it was related to their aversion to change.
With such a stratospherically big amount of users, changes to the product can’t just go live without previously recollected and solid data.
The greatest mistake, for them and for everyone, is taking no risks.

She also talked about how they considered the Dislike button but decided it was a risk not worth taking since you could better express that 'dislike' through comments and it was more appropriate way to do it. I found that interesting, since a lot (and that's A LOT) of people have wondered about it in the past.

My Notes on Noah Iliinsky's presentation - The Steps to Beautiful Visualizations

2011-05-23T15:30:00.000-07:00

It surprised me that there was a talk such as Noah's embedded in the program since it takes considerations back to a conceptual phase purely, and I personally really liked it. He basically went into detail with the premise "What's obvious isn't always that obvious bu it should be" and "People tend to complicate things that are normally very simple".

My notes on his talk:

Concepts

Visualization for analysis vs presentation
Analysis – You don’t have enough data yet, no story to tell
Presentation – You have the story to tell
A data visualization vs infographics – Infographics can’t be automatically generated and don’t have all the numeric data, but they can have rich content.
Education vs persuasion – educational information is just presented to inform and doesn’t look to push people towards a certain point of view.
Complexity is the number of information axes represented

Qualitative relationships are hard because of the fewer conventions than with quantitative relationships.
Make good choices – Intentional over arbitrary choices

Understand your goals and their needs
Choose what to include, where and how

If you can’t concisely articulate your goal, you’re doing it wrong!! (“We’re going to be the market leader” isn’t concise!)
Different goals require different methods.
Understand your customers, ‘cause your success is defined by their success
Consider the meaning of the elements in your design. Does your audience already associate them with something else?
What to include – four types of content

Data
Redundant coding
Decoration
Noise

Where to put it

People ascribe meaning to location
Relative and absolute placement matters

Use a format that fits the data
Patterns are really important for exposing meaning. Be careful when using them because, even if they are not intended, they will be interpreted.
Things that are the same should look the same and things that are different should look different! It's simple! So why not?
Pick appropriate encodings – Consistent, highly differentiable encodings

My Notes on Josh Clark's presentation - Mobile Apps: Native or Web Based?

2011-05-23T14:05:00.000-07:00

It was a very interesting lunch, meeting new people and talking personally with Luke Wroblewski, who I've admired a great deal since I met him last year in Philadelphia. And now it was the turn of Josh Clark.

I gotta say I enjoyed his presentation in quite a special way because of his way of approaching the topic. He captured my attention entirely. I've been following him on Twitter for a while now, it was nice meeting him in person and listening to what he had to say up close.

I enjoyed talking to him personally and I appreciated him for answering my questions.

Here are my notes on his talk:

One can think about mobile platforms as cultures, and the existence of many of them creates challenges.
BlackBerry – 40% of global enterprise

Higher texting activity than any other device
Low browsing activity – Browsing on a BlackBerry sucks

iPhone – High levels of activities

Higher activity than other devices even though it has a lesser share of the market.
It brought technology to the masses.

Android – It’s the technology from geeks to geeks
Windows Mobile – Classy, urban and modern
There is no single culture, each platform user has different needs and goals.
If you don’t know what it’s like to live with a phone, how can you be an expert designing natively for it?
You can’t be an expert on all of them.
It’s a split decision on platform choice – There’s not a definite winner
But only 30% of phone users have apps on their phones.
Think small – consider SMS text apps
Less is often more. Or maybe just enough is more.
Everyone loves web

You’re in complete control in what comes to distribution
You don’t have to build separate apps for each phone
There’s more ubiquity in building for mobile web than for normal web.
On mobile you can actually use HTML5 and CSS3

The current culture – You think apps are for doing and web is for reference.
Web’s weaknesses

Can’t match native apps in experience possibilities or speed.
Not easy matching great expectations
Heavyweight libraries
Clunky graphic tools and not enough hardware
In the end, web bows to apps

Then again, web is available for everyone, unlike any native app.
Your website has got to look great on mobile now.
Native apps win in payment and findability issues.
Web makes it easier to share data to other users, though.
Battle of the back office – it’s easier and inexpensive to start building web apps, and testing comes in easier too.
Consider your audience – what’s the best choice considering them?
There’s not really a fight, it’s a business consideration.
The goal is the same – create a good experience for your users
You need to have both!
Still, we should keep a consistency and have the same core content across all apps.
There’s stuff that shouldn’t be on the desktop version either. There shouldn’t be a normal and a light version; the content should be the same.
A small screen doesn’t mean the user wants to do less.
Mobile mindsets

Microtasking – Means you should prioritize some content, but not necessarily strip out the rest.
Local – Not only about GPS, but all the other sorts of inputs you can give through your mobile. The goal is NOT to remove complexity, don’t over-simplify. There’s a different between complexity and complication.
Bored – Users with a long span of attention.

The winning approach is to think about the interfaces as a spectrum of apps that generate a single satisfactory experience.
There’s no desktop strategy, mobile strategy… there’s just a plain strategy.

My Notes on Bill Scott's Designing for Mice & Men

2011-05-23T10:55:00.000-07:00

As follow up to my Web App Masters Tour report, this last talk with Bill Scott from Netflix was focused on cross-platform experiences. Very interesting perspectives.

My notes on it:

Many companies think one size fits all, but the reality is we need to design for many different devices. Not just web, but mobile and TV.
HTML5 is now the way to go to base every version.
Learn fast and fail quickly – Take risks, test results, make changes and adapt.
Netflix way of managing across platforms

Portability layer with HTML5
User experience variation across platforms (web, tv, mobile, tablet)
Consider user posture, device capabilities, among others.
Consider restraints and design for mobile first.

Mice – Web and TV
Men – Mobile and tablet
The design principles are the design, but they vary in input, posture, navigation and display.
Three principles

Design for physicality – add a realistic physical phenomenon to your application to make it easier, more intuitive and enjoyable.

Don’t break metaphors by using language out of place or misplacing elements. The user’s mental model is the experience cushion.
Strict physicality is hard to accomplish. You can add some ‘magic’ that replaces real life features.
The evolution of the scrollbar – it’s now an indicator more than a controller. The content is the one that scrolls.
Remember: fingers are fat. Recommended size of touch input is 44 pixels.

Maintain flow – Take out the ‘jumps’ from your experience.

Focus + context, simple navigation, user control
Content is the flow.
Minimize page transitions.
Replace hover details with dedicated detail panels

Keep navigation simple

Three types of iPhone navigation: Flat, Tab, Tree

Be responsive

Use animations/transitions to create responsiveness

What can be done with less is done in vain with more
Use them just as needed and think about the reactions you will be generating in the user.
Show state changes, focus attention, create delight, and simulate physicality, among others.

Use invitations for related actions.

Performance is not always a given

Luke Wroblewski also tweetted a couple of very good articles on the subject you might want to read.

For further highlights, you can follow me on Twitter.