UX/UI certificates and training

ux

Hey guys/gals,

I recently had a discussion on linkedin about a lady who had a few years of UX under her belt and she wanted to add more value and give herself more brand value as a professional. She mentioned taking a 1 week course in UX/UI to get some certificate that she could then add to her list of certificates or degrees. First I want to explain something, you do not need degrees to be the best or give yourself brand power, it obviously helps in some professions but not all (I could not just go build bridges and call myself an engineer because I have a hobby on autocad when I have no theoretical training). I know a few very talented UX/UI designers in San Francisco working with big tech companies, and currently making 6 figures; they do not have college degrees, or any formal training in UX/UI design, these are people who have been in web design their whole life and made the jump over to the usability side (Doing my Darth Vader impression).

So to further elaborate on the subject, I think getting some formal training in anything your excited about is vital to your professional brand power, but don't mistake it as something more then that, do not expect to be picked first or land the best contracts. You need to display hard work with a high level of quality in your portfolio, if your a newbie I suggest creating your own projects ( remake facebook) This will give potential clients or hiring agents better insight to your skill set and offer a fair assessment.

Start working on your own projects to build your brand power now, this will give you valuable content for your empty portfolio,(PS don't show anything you did in school, Barf!). Start doing all the research you can to be the second best UX/UI designer on the planet, this industry is trending in new directions weekly, what is hot now will be old and busted next month. (Pinterest is getting negative buz now). Stay current with your designs, practice your flows from multipul entry points, and user test everything more then once (read my coffee shop post). Don't get caught up on UX software I find it can be cumbersome for people who are learning the foundation of UX/UI, start with a sketch pad and a few common colors(RGB) for your wire-framing. Create your annotations and walk through with Power point of Keynote (I usually code it or user a few other methods, but thats later) this will also provide an area for annotations. Annotations are explanations for your page to users or developers, you will explain rollovers, I frames, anything that would require a new user experience on that page, explain anything that you feel requires a high level explanation.

For all you newer UX/UI hopefuls please don't spend all your money on training, I found hundreds of online resources that are free, don't be lazy, part of being a good UX/UI designer is the ability to research the shit out of anything. Also another big things is to join a community of UX designers, find out where we hang out, and play. Remember to have fun and stop to smell the roses along the way.

User testing at a cafe

So I am sitting at cafe Roma in San Francisco with my IPad product manager, and one of our IOS developers from Hotwire. We are scoping out people to test our New app we created for Hotwire.com. I met a nice lady in line when I was buying a muffin, she is down for testing but wants to eat her breakfast first,(no worries). Cafe testing has it's advantages and disadvantages, the cool part is meeting the users and watching random people use a product I created, it's very fun to watch. The main down fall is qualifying potential users to test on, if you can find your target audience your lucky, but it's just nice to get the product out and get people using it. (20mins later) So we tested two people and they gave us some great feedback, the only main concerns people had was the small details. These small details a not priority for testing unless they are attached to a heavily used framework, if the feature is a stand alone don't focus to heavy on it for prototyping. Give yourself goals for each listening lab, example " lets test the sign up flow" or " let's test the CTA flows", by doing this you will have a focused user testing for frameworks you feel need validation. Don't be shy get out and test your designs any way you can, you will have a way better user experience at the end of the day.

What is a “user experience” and what are the steps to make your current UX kick ass?

What is a “user experience” and what are the steps to make you current UX/UI kick ass?A quick and dirty way to create kick ass UX/UI:UX is a broad term used to explain all aspects of a person’s experience with the web/mobile application including the interface, graphics, industrial design, physical/emotional interactions, and the manual. It is also referring to the application of user-centered design practices to generate cohesive, predictive and desirable designs based on holistic consideration of users’ experience. In most cases, User experience design fully encompasses traditional Human-Computer Interaction (HCI) design and extends it by addressing all aspects of a product or service as perceived by users. 

Ok so what the heck does all this even mean? Let me simplify things a bit to make it easier to understand. (Do you see the irony in this?)Essentially we make shit easy to use by collecting data (educated guessing) to predict and decide the user flow of the application for a specific task. Environment strangely enough comes into play also, users have different needs or time constraints with different devices, times of day or location, even mood plays an important role. If I am sitting at home doing nothing but surfing the web on my giant 32 inch monitor, I have nothing but time and I am an easy target so to speak. The problem with this user is nothing at all; in fact 99% of us are this user at some point in a day. Generally we don’t build for these users because they can be satisfied easily, mainly due to the fact they have time to dig around your website to use most of the features. When I am building a new experience for a client or with my own projects, I take the following steps to get me ready and focused for the challenges I will be facing.

1) Ask a ton of questions to the client (product managers, or CTO types usually). What should you ask? My typical top 5 a) What is your target demographic, this is usually number one.b) What is your current design flow, and at what point are people “bouncing “off. c) Do you have any new plans for a new business direction, focus or strategy that might complicate the current or new flow, if so this needs to be broken down to fit the new interaction design of the site.d) Are you planning a mobile/tablet strategy? Not in place yet? If so discuss if it’s worth building the App first.e) What are the time/technical/financial constraints?

2) Now that we know the top 5 directional questions let’s begin and start to reverse “engineer” the competition, what? Engineer? Yeah, find all the competitors and make a simple diagram (pen and paper or you can get fancy) show all the feature sets for each competitor product, this will allow you to see the differences between all your competitors at one time. Also take screen shots of any interesting or cool flows or design from competitors’ sites. Turn all this into something a little more tangible by making a flow map for each site, nothing fancy just quick and dirty. To get a solid understanding of the users entry points, enter every site you visit or love from multiple points of entry, note the experience you had from 1-5 and document how you might do things differently and why. Don’t get too crazy with the entry experience, remember less is more sometimes. Once you have figured out what everyone is doing and why they do things the way they do, you’re ready to put foot to ass.(Flow map is major point of entry to the site, all the way to “call to action”)

3) So let’s review real quick, you talked over the site/app requirements with team members, you know all the demographic, direction and expectations at this point. You know the completion better then they know themselves(this is a vital component, any good solder will tell to know your enemy better then you friends) make sure your ammo is full before you go any further, if you’re having problems finding main competitors learn to use Google better and/or ask the team members. No such thing as stupid questions, just stupid answers…or people, or both… Let’s move on with the UX boot camp.

4) I want you to review the current site/app you’re working on, enter the site every way possible note your experience 1-5 and what needs to change and why. Also make sure you sign-up if needed and/or follow the CTA flow, see where it’s getting difficult, boring (lots of words) or places you think users will drop off. Make a comparison chart, highlight your site, and put it up against all the other sites (competition) how are things looking? Can you see gaps in the sites current flow when comparing it? Drop offs? Things you’re doing better or worse at? Now you can see the light (Aha! moment), let’s start building our new and improved site.

5)  My first steps are to get a standard HB pencil, some blank, white computer paper and some small post it notes and start drawing flows, Crazy hu, you thought about using tools really technical I bet. For now it’s best not to get caught up with time constraints of technology, besides your design will change minute to minute this is major brainstorming we’re doing here people (PS, if you can’t draw don’t worry you’re not presenting this to clients or users, it’s purely for internal usage, it’s just faster and allows you to loosen up and get dirty). Don’t be afraid to think outside the box and challenge yourself or other rules; this is what makes us UX designers “interesting” people. Use the post-it notes to perfect your annotations for user and site interactions page by page, the post it notes are great because you can move them around without re-writing or ruining your mock-ups. Now that you have something prototyped I am sure you can see the funnel that this little exercise has taken you down, you’re on your way to your first web user experience design; take a breath and give yourself a high five (don’t let anyone see you they will think you’re crazy, trust me..

6) Now, the flow is in good shape and it makes sense from multiple entry points, CTA’s and pattern frameworks. I want you to count how many button clicks a user would take to get them to buy, sign up or do the thing your site wants users to do (CTA), 3-4 clicks is average, more is fine as long as the user feels progress and accomplishment, don’t leave them hanging. Do not make this process long, try to eliminate as much sign up or user text fields as possible, find a good integration tool if needed (FB connect or something), 3rd party sign up/in tools are awesome, it unlocks so much social power for your site and its dead easy to use, but this might not be an option for you if you need SSL options; just do your research before you decide.
Let’s create real mid- high fidelity mock-ups. Notice how we just skipped wire framing, we basically already did this with the drawing and annotations, and why do it again? Just to show people you know how to make boxes and layouts on a fancy web tool? Skip this please, try to never make computer based wireframes this is old and cumbersome method and needs to be abolished. If you disagree that is fine, but time is money; remember that when you’re a scrappy start up with only 200K in working capital.

7) Choose your favorite graphics editor, mine is Fireworks and Photoshop, they have wicked powers to export/create HTML, CSS…and can make vector art (fireworks) if you have no experience with these tools grab a coffee and please visit http://tv.adobe.com/ I have spent hours of my life here. Make sure to use proper naming when creating layers; it will make your life easier down the road. Also lets use our own common sense and try to build our prototype graphics in the right dimensions for the web or application you building, please don’t build small graphics, building bigger and scaling down is fine.  Don’t get caught up on heavy eye candy graphics just yet, we don’t want the user to get mixed up and judge the comps based on UI design, make note of this early to the user . I am not going to tell you how to set up your page in Photoshop or Fireworks; everyone has their own comfortable format for guide lines and so on. Turn on a few of the “stick to grid”, edge or pixel or what have you, also get friendly with layer comps in Photoshop and in Fireworks, please Google “layer comps” to really understand this tool, but in a nut shell this cool feature will allow you to turn off certain layers and turn on certain layers as a group to mimic different webpages the user is on, this is fast for seeing how your flows are developing, without wasting time turning a million different eye balls off and on… When saving your work remember to save for web and devices, or another good way is PNG with transparent BG. Now let’s build click-able comps to show our clients and maybe some test subjects for user feedback.

8)      If you’re an HTML, CSS guru go ahead and make these comps clickable in 5 times the amount of time it will take me. The time you’re done coding the comps I will have built a full interactive prototype, tested it out and started making my revisions.(trust me I have had races with some fast coders). As long as the tools you choose to create prototypes with works and it simulates the sites navigation the way you planed it, use whatever method you want. I like to use Keynote (power point for windows) for interactive PDF web prototypes, and Proto.io for mobile and tablet, also check out keynotopia, the web is full of prototyping tools so don’t worry. Now that our done building for now, the client can play with the interactive comps on his/her computer, IPhone or tablet and really get a feel for what is coming, at this point we can see life in our design, and see where people will get stuck or drop off, this gives us the chance to revise our flow.

9)      Once you have built a few iterations of the site or app, now do a fun A/B/C test on a few people that are the current demographic. Ask friends, family, co-workers not in design or programing to test out your prototype, find the ones who don’t use tech much as I find they make the best test subjects. My philosophy is if a 5 year old can use your site, anyone can. When testing the site, don’t set the users up with queued navigation, let them figure things out, take notes and only assist or give a caveat when needed. Now that we tested the shit out of the flows, let’s go back to the drawing board and look through all the notes you took while the users tested your site. Now we can start looking at ways to improve your existing pattern framework, find all the kinks you can before it is shipped of for development, this will save time, money and all of the above.

10)   Test the flows again on some innocent bystanders, I would at times ask people on the bus, they are usually willing participants; just don’t ask in the morning. You should have a very refined product at this point, it should look good and feel good with no dead ends, sticky spots or confusing UI design (icons) be clear with all design elements, do not assume anything. Some simple things to remember1) Icons are cool please don’t beat them to death2) Try not to copy design trends (pinterest) they don’t last and you don’t stand out3) Colours are nice but let’s not build a rainbow website, build a nice colour wheel4) Header nav bars are still ok, but pull down menus are not, period…5) Font size and styles are fun but let’s keep things consistent 6) Contact info is a must on a site, please don’t just have a submit question form7) Footer styling is cool but serves no purpose; more than half your viewers will never see it.8) Position your search bar and social sharing options above the fold and not in footer.9) Make sure all your important CTA content is above the fold of majority of web browsers.10) Test it, re-build it, test it again, don’t fall in love with your work and learn to take criticism even when you think you know everything. 

Save all your designs and graphics in the right format (PNG, GIF, JPG) and get them ready in a folder with some named subfolders to separate graphical elements like icons and logos, Complex headers or footers…etc, learn to be organized with your work. Place all the web page graphics in different folders, remember you don’t need to repeat or save multiple graphics, your developer will be re-using them, but make sure you have design maps for each page with annotations, and text or copy, with Font size, font type, and colour. If you’re a CSS or HTLM guy, you can get the majority of the front end stuff completed and had over your files to the developers. 

And remember how lucky we are to actually get paid for doing this stuff....ride the bubble...

16-Year-Old Programmer Raises Seed Round From Billionaire Li Ka Shing To ‘Summarize The Web’

Launching today on the App Store is a new application called Summly that, in short, attempts to summarize the Web. The app was formerly known as Trimit (which we covered back in July), before Founder (and 16-year-old programmer) Nick D’Aloisio raised a seed round from billionaire Hong Kong investor Li Ka-shing and his investment vehicle, Horizons Ventures.

Horizons encouraged D’Aloisio to change his startup’s name to “Summly Limited”, which he has done, all in tune to what we are hearing is a sum of money that’s over $250K, which the startup will use to ramp up hiring, for development, and creating patents. At the very least, it’s a lot of money for a 16-year-old. Do you remember what you were doing at 16? Likelihood is it wasn’t raising seed funding from the world’s billionaires. (I was just learning to tie my shoes.)

So what is this Summly app that everyone’s so excited about? Well, in July, I wrote that the value proposition for Trimit was that its web and iOS apps allowed you “to condense content into 1,000, 500, or 140-character summaries. Essentially, Trimit was a text auto summarizer designed to fit all those things you’re reading on a mobile device into concise synopses and share those over SMS, email, Facebook, Twitter in .txt form — all with a few clicks”.

Today, the guy that Om calls “the Internet’s new boy genius” has used his new money to enlist the service of veteran programmers to built out the initial architecture around his genetic programming and AI-based tool that he says, “mimics evolution”.

It does this because, as the 16-year-old says, the Web is overloaded with content (I like to think I’ve in some small way contributed to that), so Summly offers the world a simpler browsing and search experience by summarizing content into bite-sized chunks to make it easier to consume.

And it seems to be working. Researchers at MIT, D’Aloisio tells us, have tested Summly’s patent-pending technology and have found that it outperforms the “highest academically published results” by a factor of 30 percent.

Why? According to the founder, Summly’s algorithm is able to instantly analyze text and automatically distill it into digestible chunks, doing so as you browse and surf the Web, providing succinct summaries of search results, articles, and Web pages. D’Aloisio was a little more hesitant this time around to discuss the secret sauce that makes his new app tick, but for a glimpse, see our previous post on Trimit to get a sense of what’s behind the app — and how it works in practice.

Sean Parker And Shervin Pishevar At Le Web: “If You Don’t Fail, You Haven’t Tried Hard Enough”

Last week at Le Web, Alexia interviewed Sean Parker and Shervin Pishevar onstage in what turned out to be one of the most-buzzed about sessions. Here is the full video for your weekend watching pleasure. It’s a great discussion that ranges across the state of startups, venture capital, music, and politics .

Parker bemoans the surplus of venture capital for its effect of diluting the talent in the tech industry, a point he’s made before. “It prevents the aggregation of talent around great ideas,” he says. He emphasizes the need for a great team from the get-go. “People are the greatest asset class,” Pishevar agrees.

The conversation quickly turns to Gowalla, which recently was acquired by Facebook, and why it failed to take on Foursquare. “If you don’t fail, you haven’t tried hard enough,” says Pishevar. He warns against “success amnesia.” Behind every great success there are failures. Learn from them. ”The product was too similar to Foursquare,” says Parker, noting the obvious. He thinks that “there were things they could have done,” which he suggested to the team at the time, but “they did not want to consider alternatives.” Both however say they are happy with the outcome (Parker is a big Facebook shareholder).

Speaking about his own failures, Parker says, “We failed with Napster to build a legal licensing model. As a result, we watched the industry we loved collapse.” But “the biggest failure we made there was hiring. We built the wrong team.” He warns that when you have a startup with a lot of hype, “it inevitably attracts a certain breed of parasitic leech that if you do make the mistake of hiring, you have to realize your mistake quickly and eradicate it like you would any kind of insect.”

The Art of Raising Venture Capital

These videos are my recent attempt to explain the art of raising venture capital. They are part of the Montgomery & Hansen online learning site and conference. For example, to learn about financing agreements and the term-sheet process.

Zuckerbergs Facebook Photo Hack

Pictures showed Mr Zuckerberg and his girlfriend cooking A series of private pictures of Facebook founder Mark Zuckerberg have been posted online by "hackers" to highlight a bug in the social network.

In total 14 pictures of Mr Zuckerberg were posted to image site Imgur under the headline: "It's time to fix those security flaws Facebook".

The bug related to tools designed to allow users to report inappropriate images.

Facebook said that it had fixed the glitch.
Privacy

Mr Zuckerberg and... a chicken

"Earlier today, we discovered a bug in one of our reporting flows that allows people to report multiple instances of inappropriate content simultaneously," the firm said in a statement.

"The bug allowed anyone to view a limited number of another user's most recently uploaded photos irrespective of the privacy settings for these photos.

"This was the result of one of our recent code pushes and was live for a limited period of time. Upon discovering the bug, we immediately disabled the system, and will only return functionality once we can confirm the bug has been fixed," the statement read.

The BBC asked Facebook's permission before publishing the photographs of Mr Zuckerberg. The firm said that as the pictures were now in the public domain it would not be pursuing copyright infringement claims.
Loophole
The bug was discovered by members of a bodybuilding forum who went on to post step-by-step instructions on how to view private photos.

When users reported a public profile picture of someone as inappropriate, they were invited by Facebook to view more of the person's pictures to look for similar content. The thumbnails shown to them were easy to enlarge and download.

The "hackers" used the loophole to break into Mr Zuckerberg's pages, as the most high profile member of Facebook's 850 million users.

The images of Mr Zuckerberg included shots of him preparing food with his girlfriend, holding a chicken by the leg and meeting US President Barack Obama.

The embarrassing incident comes a week after the Federal Trade Commission slammed changes made to Facebook's privacy settings two years ago. It accused the social network of deceptive practices and demanded it subject itself to regular audits over the next 20 years.