// Three important questions you should always yourself about your users

1. Are they happy?
2. Is it easy?
3. Do they trust it?

// Google Wave – Build for the user

Wave was built for the builders of the app. Wade’s belief that the reason why the app failed was the lack of user feedback and understanding of there motivations

// Wander – Maybe the wrong app

App built for connecting with other people to learn other languages. After doing user research they discovered the reason users used the app was to more of connecting with people in different countries in the same vein as having a PenPal.

• Wrong app, Built for learning language
• Built another one for interacting with people across the world.
• Ask yourself, what is the reason people use our application

// User Experience

1. Is the way a person feels about using a product, system or service
2. Highlights the experiential, affective, meaningful and valuable aspects of human…

// Interaction Design

1. Is the practice of designing interactive digital products, environments and services
2. It has an interest in form but its main focus is on behavior
3. It is synthesis and imagining things as they might be, more so that focusing on how things are.

“Interaction Design is heavily focused on satisfying the needs and desires of the people who will use the product where other disciplines heavy focus on designing for stakeholder of a product.”

// Tips for the everyday UX Designer

1. Don’t wait to be told
2. Your opinion doesn’t matter its your users opinion that matters more. You’re a power user of your app and your perspective is jaded.
3. Don’t rely just on color as a differentiator for buttons. 8% of men are colorblind so use other differentiate such as shape.
4. Don’t make them select a credit card type
5. Don’t ask for city and state user the computer to determine it. Zip code first

// The UX Designer’s Toolset

1. User surveys / testing
   • www.usertesting.com
   • www.userlytics.com
   • www.youeye.com
   • www.trymyui.com
2. Wireframes and prototypes
   • Don’t show color
   • Stay off the computer as long as you can
   • White board
3. User flows
   • Working prototype (working document)
   • Has to be web based
   • www.lucidcharts.com
4. Experience Maps??
5. Story Telling
   • Sketch them out like a movie
   • The mark of a good UX Designer is in how well they can tell the story
6. Design Patterns
7. User Profiles and Persons
   • Research users either in person, over the phone or through research
   • Humanizes our users
   • Cold stops any conversation that starts with “It would be cool if…” or “I’d like it if…”
   • We’re doing this for “Janett” and this is the number one feature she needs/wants.
8. Content Inventory
   • Use a wall? Sticky note
9. A/B testing
   • Use it with mock ups
   • Use it with wireframes
10. Content Style Guide
    • Living prototype, Prototype tools?
    • Protoshare application – Look into
    • Marty Keg?

1. They’re images and don’t scale easily
2. They’re difficult to theme
3. Retina Display resolution

So for the past few months I’ve been researching better ways of incorporating icons into our web app (www.3point5.com / www.promotive.com). I’m a fan of LESS CSS and Twitter’s Bootstrap and came across Font Awesome (see favorites below). After plugging that into our application I instantly became hooked on the concept of icons as a font that are fully scalable and theme-able with a few lines of CSS.

// Icon Fonts (My Favorites)

• Fontello (Pick and choose out of above fonts which ones you want)
• Font Awesome
• Entypo (include desktop version)
• Modern Pictograms | The design office
• ShiftIcons
• Icon Sweets 2

// Icon Fonts (Free)

• Entypo
• Font Awesome
• Iconic
• Fontello (Pick and choose out of above fonts which ones you want)
• Foundation Icon Fonts | Zurb
• Raphael Icon Set
• Social Media Icon Pack | Font Fabric
• Modern Pictograms | The design office
• Heydings Icons
• Modern Pictograms | Font Squirrel
• Erler
• Web Symbols Typeface | Just Be Nice Studio

// Icon Fonts (Paid)

• Shifticons
• Pictos
• Icon Moon
• Fico – A font with icons
• Icon Sweets 2
• Fonthead
• Tipogram

// Demo’s (Examples)

• CSS Tricks - Icon Fonts are Awesome
• CSS3 + Icon Fonts Demo

// Twitter Bootstrap: Web Guidelines for Developers

Twitter Bootstrap
Developer Guide (HTML, CSS, CSS3, LESS)
v 2.0
View Web Guidelines

I’ve become very fond of the Twitter Bootstrap 2 guide and have become an advocate of it ever since I found out about it.  It was created for and meant to be a guide for front-end developers to kickstart projects with common UI elements needed for most web apps and explains well how to implement it into existing code or a fresh new project. Its wonderful to base a style guide off and very easy to implement and customize especially with the use of less css.  Its especially great for hybrid designer/developers like myself that can design within the browser and quickly put together prototypes and demo functional wireframes. What about those designers that don’t code or that aren’t as versed or efficient in designing in the browser but want to pass their design off to a developer that wants to use bootstrap to streamline the coding process? I can just here them thinking “It would be nice to have a photoshop template that I can use to quickly put together a comp using existing styles already set up in the bootstrap css framework code”. Well that was I was thinking.

// Twitter Bootstrap: Photoshop Template for Designers

Twitter Bootstrap for v2.0
Design Template (Adobe Photoshop, PSD)
v 1.0
Download Photoshop Template

As I begin to use twitter bootstrap more and more with new apps and more designers are working on different enhancements to the same app I realized it would be nice to have a photoshop template we could all use to keep consistency in the app as we decide we evolve or enhance the twitter bootstrap defaults to adapt to the brand . So I searched around to see if anyone had already created one and there were a couple but I couldn’t find one that was for bootstrap version 2 but I did find an Adobe Fireworks template created by Grady Kelly (@gradykelly) that was well put together and very close to what is on the Twitter Bootstrap 2 guide. So I decided I’d convert it over to photoshop since that is what I work best in for UX Design.

// Twitter Bootstrap: Fireworks Template for Designers

Twitter Bootstrap  for v2.0
Design Template (Adobe Fireworks, PNG)
v 1.0
Download Fireworks Template

As I searched around for a bootstrap version 2 photoshop template I found an Adobe Fireworks template created by Grady Kelly (@gradykelly) that was well put together and very close to what is on the Twitter Bootstrap 2 guide. If you want to check for updates on the fireworks template visit the Extending Firewoks (@extendingfireworks) website. I’m providing it here as a resourse in the case that those looking would prefer it in Fireworks over Photoshop.