Comments Off on Steve Krug’s Usability Testing// Posted in Uncategorized by admin on 11.06.12.
Time and time again I recommend startup managers to watch Steve Krug’s video. They prefer endless debates, copy-pasting the competition’s features, hiring expensive usability labs, or using the “because I said so” dark Jedi mind trick. The wonder of small usability tests with real people has not caught yet.
If you’re a UI developer, UX engineer, product manager, marketing guy, CTO, CEO, or anyone that works on the frontend, please stop what you’re doing and watch this video now.
This was my next choice. You can use it to create custom galleries and add videos to them from YouTube, Vimeo, or via upload. However, it had several problems.
The UI was uncomfortable. I had to do spend plenty of time to setup the galleries. E.g., why require the exact YouTube video ID? Why not ask for the YouTube URL and retrieve the ID automatically? Also, the plugin uses JWPlayer instead of the native YouTube player to play the videos. It’s not that bad, but I found it ugly and redundant.
The biggest fault however was even worse. For a while the plugin was great, until I got a call from my client. It suddenly stopped working. Looking at the plugin support page other people had the same problem with no response from the author. Thus, I bid it farewell and moved on.
I was about to despair and write my own plugin. Fortunately doing some deeper Google searches I found YouTube SimpleGallery, a fantastic and easy to use yet unknown plugin. It had exactly what I needed – a quick and easy way to create a gallery of YouTube videos, easy to customize CSS, and an intuitive UI.
The plugin works by listing the YouTube URLs line by line and surrounding them with some shortcode. Fantastic! I setup the needed galleries very quickly and added custom CSS. I also installed Fancybox which integrates with the plugin to display the videos in a nifty dialog.
YouTube SimpleGallery proved to be the best plugin. It’s very easy to use, simple to customize, and works great with Fancybox or your favorite display plugin. If you’re looking for a solid WordPress plugin to display a YouTube video gallery, I highly recommend it.
This year I decided to fulfill a dream and go travelling for a month in the UK, that is Scotland, England and Wales. I’ve had an amazing time and got to see 2 of my favorite bands in concert – The Stone Roses reunion at Heaton Park in Manchester (magical!), and The Vaccines at The Eden Project in Cornwall.
The UK is really connected. Booking bus and train tickets is cheaper if you do it online, and sometimes can only booked online with a company like Megabus. Smartphones are abound. I got an all you can eat pay as you go data deal with the Three network for 15 GBP. Apps like Yelp and Urban Spoon work well in the UK. Here are some more suggestions from The Guardian.
Now I’m back to work, celebrating 2 years of freelance web development. Business is booming. A few projects have been waiting for my return and I already have several new offers. I’d like to expand my business with more manpower, create a Hebrew website for my SMB services, and do continue blogging about my experiences. See you soon.
This is a new blog post chain – My Favorite Web Dev Things. It’s purpose – sharing great tools and services with other web developers.
These are the rules
Copy-paste the rules.
List your favorite tools, libraries, and services for web development.
List obvious ones as well, they may not be obvious to others.
Tag other web dev bloggers and let them know.
Link back to the post that tagged you.
These are a few of my favorite web dev things:
Aptana – It’s free, speaks any language, and version 3 is great. I love how I can edit remote files via FTP, synch them locally, and commit it all to a local GIT repository.
HTML5 Reset WordPress Theme – Excellent blank slate theme with all the best practices and HTML5 Boiler Plate built-in. I’ve also seen the Roots Theme and it looks quite cool though I haven’t used it yet.
W3C Total Cache – Amazing WordPress plugin that speeds up WP sites like mad. Can’t live without it, can’t believe it’s free.
CSS Sprites Generator – Easy to use sprites generator. Lacks some features, but definitely helps and saves loads of time.
I’m often asked whether I know HTML5, which I do. I see other web development companies throwing around that fancy HTML5 logo, hoping to impress new clients. Clearly, there is a lot of buzz around it, but do people know what HTML5 actually means?
Folks must have read or heard that HTML5 is the latest shizzle, and that they should demand it from their friendly neighborhood web developer. Fair enough. Nonetheless, I’d like to clear it up and help you understand what you’re actually asking for.
Basically, HTML5 is the latest version of the HTML standard. Just like a new version of MS Word gets released every now and then with new features, so does HTML. Previous versions include 2.0, 3.2, 4.0, etc. HTML 5.0 is the new version, and older versions will still be supported by the browsers.
What does HTML5 include? Actually, HTML5 is still under development. Some browsers implement some of its features. As usual, vendors like Mozilla, Microsoft, and Google have disagreements and do things differently. Read all about it on the excellent Dive Into HTML5 website.
Having said that, HTML5 includes several new features. First of all, it supports new HTML semantic tags. If you’re not a web developer, this shouldn’t matter to you except for a few cool things like email and search form fields. Browsers, especially mobile, treat them differently, for example by loading the email keyboard when filling an email field. Take a look at the HTML5 cheat sheet for new tags if you’re up to it.
One of the hottest HTML5 features is a built-in video player. Wait a sec, don’t we already have browser video players? Yes we do, but they are Flash based and need the Flash plugin to work. Flash no more, for modern browsers shall cometh with their own video player that works on iPhones and iPads and can be customized with a new look.
Canvas, a web browser drawing surface, is another cool feature. It brings in-browser animation and gaming to the masses, pushing Flash off the throne. They are even working on 3D standards such as WebGL, coming soon to a web browser near you.
Other features include geolocation, local storage, offline support, and more, all hopefully in your browser. Hopefully!? Yeah, not all features are fully implemented for all browsers yet. Furthermore, old browsers will have to rely on fallback technologies, like Flash, and eventually have to be upgraded.
To sum it up, instead of blindly asking for HTML5, ask for the features that you actually need. Whether it’s video, animation, or offline storage, let your web developer figure out how to implement it . HTH.
Doing freelance work at the offices of SimilarGroup I’ve realized something important. Seating arrangements in hi-tech companies are all wrong.
In the beginning I was sat in a big room with 6-10 people. The assumption was that I should sit next to the other frontend guy. This room has lots of noise, arguments, and a general feeling of stress and lack of privacy.
Fortunately one of the other offices was cleared, so while 3 arguments were happening in the big room I took the chance to infiltrate the office together with another employee who had had enough. The result is peace and quiet, more effective work, and a new friend.
Usually the seating is done by function. Teams are stuck together in the same room, managers in different rooms, and so on. It assumes that sitting next to someone you work with will bring the most use.
However, seating arrangements by function are useless. With smart phones, instant messaging, voice chat, email, and lest you forget, legs, people from the same team don’t need to sit next to each other to talk. Heck, they can be in entirely different countries.
Sitting arrangements should be by work environments. Different people work and feel better in different environments. These should be classified, and people who prefer similar environments should sit together. These are the factors at the very least:
Noise level. Some people like their work environments loud & chaotic. Endless debates, shouting, people coming in and out. Other people prefer quiet, I’m among them. Loud people hate being told to be quiet and the quiet people hate it when it’s loud. Nope, earphones don’t help.
Music. It’s always a yes/no answer whether people like to work with/out music. If yes, which kind of music is also a matter of importance. I’ve sat in the past with a woman who loved Israeli mainstream and hated electronic music while I was the opposite. This was cause for much arguments.
Aircon. Have you ever sat with someone who turns on the aircon full blast to 15 degrees Celsius while you freeze into a popsicle? Or someone who feels cold while the sweat drips from your forehead at 30 degrees? Wars have been waged over aircon settings and while battles have been won the wars keep on waging.
If you make cutting edge technology, why not try cutting edge seating? Your employees will be happier and productivity will go up. Maybe even seating people from different teams with different knowledge together will allow everyone to learn new things and cause integration in the company to strengthen.
MVVM = Model View View-Model
This pattern was made for event driven UIs, thus making it perfect for web apps. Instead of writing loads of GUI code, it allows binding elements from the view to the model. Thus when one changes, so may the other.
Knockout.js uses this pattern. As you can see in their example code below, the HTML defines not only the layout, but also the events on each UI element and what it should trigger. The backend JS code binds to it and says what to do:
knockout.js example code
On first look I was shocked. Everything I know about JS so far, especially due to jQuery, was to keep Kosher and separate behavior from the view, i.e. the JS from the HTML. This framework puts at least part of the behavior in the HTML which is a big no no regularly.
On second look, what they did with a few lines of code would take plenty more if I had to write this otherwise. It also allows describing the UX in the HTML first and writing the backend code later, a rather cool way of development for a UX driven developer like me.
The real test would be to actually use it for a big ass web app and see what happens when the shit hits the fan. Does it work well with plugins and UI frameworks? Does it tango with AJAX? Is it easy to maintain?
Bottom line – looks really promising, needs to prove itself in big complicated web apps.
So, what is it all about? Elements are basic UI elements such as text boxes and buttons. Blocks are either groups of elements or other blocks, such as search (input + button), or site header (logo + nav + search).
The idea is that blocks are independent and can be glued anywhere in your project, thus allowing code reuse. In case you want them to be a little different somewhere in your app, a modifier is used. It could be implemented as an extra CSS class that’s appended to the HTML tag.
There’s logic to their approach. Recently I’ve separated myself UI elements in a web app to widgets and components, which correspond exactly to their separation between blocks and elements. However, is it worth it to throw away what we’ve learned from MVC and organize our code only by visual means?
Bottom line – nice to see a different and logical approach, needs way more time to mature.
Comments Off on 8 Tips To Improve Your Draw Something Skills// Posted in Uncategorized by admin on 03.30.12.
Like the rest of the world I’ve caught the Draw Something madness. This is the best and funnest app ever. Its developer is a genius.
Playing it for hours and hours in the last week I realized not everyone has figured out how to play it well. So just in case, here are 8 tips how to improve your Draw Something skills, get lots of coins, and have more fun sketching.
Set the context. Don’t just draw an abstract shape and leave it, draw its surroundings as well. Is it handheld? Sketch a hand holding it. Is it on the ground? Draw it on the ground under a sunny sky. Is it at sea? Paint the sea with some waves or it could be mistaken for a sky.
Think associatively. Add anything that comes to mind when thinking about the sketch word. For example, if you get the word “Brazil” you can pinpoint Brazil on a world map, sketch the Brazilian flag, a carnival showgirl, a soccer ball, the beach, etc. The more, the merrier,
Use the right colors. The sky should be blue, the ground yellow/brown/green, lips should be red. If you don’t have an expanded color set yet, use a substitute color and add text to tell your friend which color it should actually be.
Stick to caricature stereotypes. Need to paint Lady Gaga? Do her big sunglasses and famous hair bow. Beyonce must be sketched with a bootylicious body. Give pirates and vikings a mean looking face and doctors and children big smiles. Mustaches should be hairy and giraffes should be tall.
Do several sketches via the trash. Trashing your sketch is good in case you messed up, but you can also use it to do several sketches of the same thing. One sketch of popcorn could be someone holding a bucket of popcorn in the cinema. A second sketch could show a whole corn, one grain, a microwave, and then a popcorn.
Use number for different states. To sketch the word bounce, mark 1 a ball about to drop on the ground, 2 as it goes on the way up, 3 when it drops again, 4 when it goes up again. That’s definitely clearer than just showing a ball coming towards the ground.
Use arrows and circles.You can use arrows to show movement, actions, or point to a specific part in your painting. Circling can have a similar effect by emphasizing the most important part in your sketch.
Give textual clues if you must. Only do it as a last resort, and choose them wisely to keep things fun. Personally I delete people who give away the word itself, but some cute clues can’t hurt. E.g., when sketching the word “twist” aside from showing a stickman twisting away I added the words “come on let’s _____ again”.