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

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.

My Notes on Jared Spool’s presentation – Mobile & UX: In the eye of the perfect storm

Hello everyone! It’s the first day of this year’s Web App Masters Tour, Seattle stop, and I’m right here listening to what the experienced Masters have to say about what it takes to design a good experience today, highly focusing on mobile topics (which is why I’m here).

I’ll be documenting the key points of each talk, so you can have a little taste of what’s new on the field and all the great information Jared picked out this year.

The first talk of the day is Jared’s introduction on mobile today. These are my notes on it:

  • We’re making mobile experiences without really understanding what they imply.
  • Sturgeon’s Law – Theodore Sturgeon
    • 90% of everything is crap
  • You have to format for the small screen
  • Are you considering the user’s perspective? Are you in the other 10%?
  • The pattern repeats – Get the technology out > Add features > Focus on the experience.
  • Device recognition – Why are we not considering it?
  • Good mobile experiences – Best Buy and Amazon.
  • Te feature stage focuses on adding, the experience stage focuses on removing.
  • Leave just the essential
  • Don’t just design the activities, design the gap between them (Six Flags vs Disney)
  • You don’t realize how annoying a task is until you don’t have to do it anymore.
  • Experience must fill the gaps, and mobile often lives between the gaps
  • The Kano Model
    • User Satisfaction by Company Investment
    • Never change or remove basic expectations
    • Performance pay off is same amount of both
    • Excitement generators – Don’t take a lot of investment but produce delight
    • With time, the delighters become basic expectations – monitoring that constantly.
    • Have to meet basic expectations before excitement generators work
  • A team that works on creating good experiences needs to have a specific set of skills. Even though this set of skills keeps growing with the new technology and design tendencies, teams are getting smaller with members with a bunch of skills each.
  • The three questions that define a well formed team
    • The Vision Question: “Can everyone on the team describe the experience of using your design five years from now?”
    • The Feedback Question: “ In the last six weeks, have you spent more than two hours watching someone use your or a competitor’s design?”
      • Methods for feedback
        • Usability test
        • Field studies
        • Customer Support
        • Using it yourself
    • The Culture Question: “In the last six weeks, have you rewarded a team member for creating a major design failure?”
  • We must meets basic needs while we also create delightful experiences.
  • Understand how Sturgeon’s Law works and how to not be in that 90%
  • Understand how Market Maturity works

GUI for Wireframing BlackBerry Apps on Photoshop

I always work with Adobe Photoshop to create high quality wireframes. You know, after I’m done with selecting the final versions amongst my mock-ups. And I hadn’t had the need to wireframe for BlackBerry specifically, I had been working on mobile web applications.

I had to work on native application wireframes before, yes, but they were for iPhone or Android and I had no trouble finding a PSD GUI that I could use for those purposes.

I didn’t find a BlackBerry GUI, though. There are many PSDs of the phone carcass, but I needed the interface elements.

So I made one.

And now I want to share it with everyone, since I’m normally using stuff other people share for my projects.

I hope you find useful for your future wireframing needs.

Screen Sizes

480 x 380 | 320 x 240

I must clearify beforehand that my work was limited to the interface elements. The phone illustration was made by someone else.

Any other GUIs you’ve had trouble finding?

Wireframing in Microsoft PowerPoint using PowerMockup

Hello everyone. Once again, there’s some interesting information that I must share with the web design community.

I was in touch with the people of Wulfsoft and found out a very interesting software they have been working on. They were kind enough to let me try it out and I have to say I was pleased with the outcome. Maybe it’s partly because of my normal excitement over finding new wireframing tools, but it also relates to a question that had been wandering about inside my head for a while:

If Keynote can be used for wireframing, why can’t PowerPoint?

I’m sorry, I know the design community in general is greatly constituted by Mac users, and I recently joined in since my current employer got me a big one to work with. But my home computer is still a PC, and Microsoft is still a big part of my life. And everytime I have a huge presentation or an upcoming class, my material is done via Microsoft PowerPoint, so it’s a tool I’m very used too (and very fond of since its 2007 version).

That’s why I was very excited to know about the PowerMockup tool.

PowerMockup is actually a plugin for Microsoft PowerPoint so that it can be used as a complete wireframing tool. What PowerMockup does is that it adds a group of tools to your main menu, as the following image describes.

So, from each group of elements provided this way, you just have to select the one you want to have on your PowerPoint slide. It’s as easy as that.

It has all the main elements you need plus many others, markup elements and a wide variety of icons.

Advantages

  • It’s easy to install and it’s not obtrusive, since it merges with PowerPoint’s normal menu.
  • It’s easy to use, no instructions needed
  • It’s fast to use, you get wireframes done very quickly since you can take advantage of the customizing possibilities of Microsoft PowerPoint elements.
  • It has all the web design elements you need.
  • Most elements are actually a group of smaller elements, so they are fully customizable (for example, the browser window’s URL bar can be customized, and its icons too).

Disadvantages

  • Since it stands fully as a Microsoft PowerPoint plugin, it’s obvious that real time online collaboration can’t be accomplished. But this will depend on your specific needs, I wouldn’t necessarily call it a disadvantage.
  • Just as it takes advantage of Microsoft PowerPoint’s capabilities, it also suffers from its limitations (for example, its not-pixel-perfect positioning scheme, which bugs me sometimes).
  • It doesn’t include mobile design elements (which I have to admit, given my main current line of work, would have been very useful).

What are your personal insights on the tool? You should try it out and judge it personally!

Wireframing Tool Review: Tiggr

Just recently I was asked to review a new online wireframing tool called Tiggr. I spent a few hours browsing through its features and I can honestly say it is one of the most flexible online tools I’ve encountered so far.

Let me show you some of my discoveries, starting with the presentation of the main work area:

As you can appreciate with the image, we have a main menu on top, and auxiliary tool bars on the right and left areas. In the middle is our main workspace, with the defined grid to guide us while positioning everything. The workspace size varies according to the type of project you work on (whether it’s for the web or for a mobile app)

The left area controls are for the main work elements, which will vary depending on the type of project, too. One just has to click on them, drag them to the workspace and drop them in the desired location.

The right area holds customization properties like the image shows. The bottom panel varies depending on the selected element on screen.

On the bottom, in addition, we have the option to toggle a chat window to collaboratively work with projects online. Tiggr also supports multipage projects, so we can either add new screens to our project or toggle the screen thumbnail view.

To sum up, the main advantages of using Tiggr are:

  • It supports multipage projects
  • It supports both web wireframing and mobile wireframing
  • Interactive prototypes can be built with basic navigation between screens
  • It provides the main controls for building wireframes
  • It provides full customization for every element it has available
  • You can collaborate online with your other team members
  • You can save multiple projects online

Some of its disadvantages:

  • The number of controls available is somewhat limited
  • The way the customization options are presented is a little developer-oriented. It is, nonetheless, a ver clean way to show them.
  • You need to create an account before being able to use it.

Be sure to give it a try. You can share your personal experiences, too. What did you personally think about the user interface of Tiggr?

What You’ll Need for Working on Mobile Web Apps

Right now, my responsabilities inside my company have been a real roller coaster, but I’ve enjoyed the degree of knowledge this has given me over the past couple of weeks. Up to now, I can pretty much mention all the tools you’ll need to get your own mobile web app project going, what these tools can do for you, why you need them and in what order you will be needing them.

Interested yet? Let’s take a look.

Stencils, printed wireframing sheets, or mock-up applications

First, you need to find the quickest way to start brainstorming app layout ideas.

Personally, I find a printed and hand-sketched way the most useful of all, sometimes the machine is just slowing us down or limiting our creativity. A pencil won’t do that to you. If you decide to listen to me and sketch everything yourself, go ahead and choose the sketching sheet of your preference to do so. And you can even get yourself a couple of really cool stencils to get you through this matter in a more orderly fashion.

Need aditional help? Yes, you can always work on the computer. There are a lot of tools that enable you to do so, like Balsamiq Mockups, Mockflow, iPhone Mockup, and a new one I just recently discovered called Tiggr. I’ll be soon posting a review on that one.

An image editor and platform GUIs

The image editor of my own personal choice is always Adobe Photoshop. I have tons of PSD mobile GUIs I’ve gathered to make my job easier, you can pick some out yourselves. I’m actually currently working on a Blackberry 5.0 GUI since I haven’t found one in that format and I’ll be needing one soon. I’ll post it here when I’m done.

Once you’ve got your GUIs and high quality wireframing kits, you can go ahead and design the final accurate layout for your mobile application. And then, the tough part.

A mobile development framework

Yes, getting to the development part. And hey, I’ve had my share of that, too. There are a lot of frameworks you can choose from to aid you in this matter, but my framework of preference is JQuery Mobile.

I’ve worked with JQuery before, it was my framework of preference when working with websites, and I have to say JQuery really does simplify your job when it comes to mobile apps. You can check out the documentation and demos yourself and make sure of it.

The mobile device of choice or an emulator software

Ok, so let’s assume you got to the development phase and got started on your app. You need to constantly test it, of course. I’d say the best way to test it is to browse through it with the device itself, but since we don’t always have one at hand, we can go get a useful emulator and save ourselves the geeky shame of having to buy every device (although I have to admit it would be cool).

Right now I’ve been viewing my work directly on my iPod, but you can also use an online iPhone Tester to get the job done. If you want a desktop application to do this, though, I can recommend iBBDemo2. I just downloaded it myself, it’s really good and it includes iPad emulations and orientation changes.

And of course we can always get to the Android alternative, or the Blackberry alternative.

If you have a passion for tech, check out online it courses.

Well, that’s it for now on mobile resources, but I will keep this up for a while.

Drawing Tool Review: Painter SAI

I was browsing through my deviantArt follows and encountered a very good piece of artwork by a dear friend of mine, entirely black and white. I told him it made me envious to see how clean and neat his outlines came out, since I’m always so impatient with the Pen Tool in Photoshop and even then my linearts never come out the way I want them to.

He told me he was using Painter SAI to make the outlines, and I decided to give it a try.

Advantages of the software

  • It has a pulse stabilizer, so even if you don’t work with paths using the Pen Tool in Photoshop, your lineart will come out pretty neat (of course, using a drawing tablet)
  • Its use of the drawing brushed is a lot more user-friendly, with tons of easy-to-adjust properties
  • It works with layers the same way Photoshop does
  • It can export your work to various known formats like PSD, JPG, PNG, among others
  • Its free

Disadvantages

  • It’s mainly for artistic purposes. Don’t expect it to replace your web design needs.
  • It is a lot more limited, it has less tools and options than Photoshop

Oh, before we finish, let me share my finished artwork:

Artists, definitely give it a try. You won’t regret it

Giving Programming Lessons: What You Should Expect from the Students

I got to say that, being recently enrolled in this matter, I have encountered many surprises, both good and bad. I must clarify, though, that most of them have been very good experiences.

I’ve given short and intensive workshops before, but since they have all been two-day experiences with people that are already in a postgraduate level of education or already working as part of a determined company, it is not at all the same as working periodically, during sessions that have only a 50-minute extension, with undergraduate students.

After what I’ve been through up to now, I can give a few pointers on the subject that can define a common profile of the undergraduate Computer Science or Human Interaction student (or related majors that include programming classes)

Easy-to-handle attitudes

Students that have already chosen a major with the level of logical difficulty as Computer Science or Human Interaction do not commonly have bad learning attitudes. You almost never find students that are there because ‘they didn’t know what else to study’. Most of them come to class with a very good attitude, so calming them or getting their attention is not as difficult as it is sometimes with other majors.

High level of eagerness

Most of the students gathered for coding lessons are there because they have seen what coding can accomplished and want to accomplish just that. If you keep them eager with examples that keep them in awe, controlling a large group will be a lot simpler.

Likely to be frustrated

A downside here is the way beginner students that start having difficulties tend to be frustrated to the point where a simple mistake becomes invisible to them (well, I think we can all agree this happens even when we are experienced). Reassuring them and helping them through their difficulties is a very important part of managing the group.

Very visual and practical

If we keep coding lessons based only on theoretical material, students will fall asleep. The best combination are:

  • A very visual presentation (short term explanations, code fragments, brief-content slides)
  • A classroom with a computer for each student
  • A lot of previously prepared coding exercises

Keeping them in constant practice is a key aspect.

Motivation expectations

All of the above can be summarized in a simple concept: motivation. Students must be motivated, and being motivated also means keeping everything you teach them linked to the real world. Don’t just teach them how to do stuff, teach them what that stuff is for. Who knows? Maybe you help them define their job interests, or advanced studies interests. Or maybe they just find out coding isn’t the right thing to do with their lives. Either way you will be helping them out.

So what do you think? Are you up for giving Computer Science teaching a try?

PHP Tutorials That Will Have You Programming Right Away

Now that I have been teaching HTML and CSS for the new students of the Computer Technologies mayor at the university, I have been asked one or two times if we’re going to cover basic PHP programming. Sadly, the time I have for that course is limited.

Nevertheless, I gathered a list of effective PHP tutorials for beginner web developers that want to go down the free path of the open-source programming.

PHPFreaks Tutorials

Home & Learn Free PHP Tutorials

Zend Developer Zone PHP 101 Tutorials

CSS-Tricks PHP for Beginners Tutorial

WebMonkey PHP Tutorial for Beginners

HTML Goodies PHP Tutorial: Introduction

PHP Manual

W3Schools PHP Tutorial

PHP Tutorials

Tizag PHP Tutorials

The Many Faces of a Navigation Diagram

Aside from whatever method is used to reach an understanding about a site’s navigation, there are many ways to present the final result. I’ll review the ones I’ve been able to work with in the past.

Horizontal site map

A simple site map is a regular hierarchical representation of a website’s navigation with no symbols apart from straight horizontal lines connecting each page in the diagram. This model works better for sites with many categories and a short level of depth.

Vertical site map

Another way of presenting a normal site map diagram is in a vertical presentation, which works better for sites that have greater depth.

Three-dimensional diagrams

This type of diagram isn’t really one that will bring added value to the project. It can be considered, though, for executive presentations in order to sell an idea.

One way to do this is using the Dynamic Diagrams model, which I tried out for my thesis once.

Application maps

Hagan Rivers was the one to show me the way to use application maps for presenting a website’s navigation. It is a lot more practical than using site maps since it takes advantage of the available space, and its symbology is very straight forward.

Garrett’s visual vocabulary

An interesting and complex approach to information architecture visual vocabulary is presented by Jesse James Garrett. It may be taking it one step ahead to talk about information architecture, but it is a very complete way of explaining all of the content involved in any website.

What method of diagramming are you using today?