Tag Archives: user interface

Starting with Readability

At the start of April I finally found a few evenings to plan out a new site for myself. I had purchased a domain some time last year and hadn’t wanted to hurriedly dive into yet another WordPress install, find a basic theme to get it going and maybe, maybe come back later with my own.

Byandyparker.com needed to be different, it needed to have an objective to drive me to keep it going. I’ve always had test beds somewhere to try out ideas but this time I wanted to show my working out in the public eye and decided that I would publish my changes at the end of each day for my colleagues to review. Around that time I had just purchased an iPad, never even using one up to that point my first download was Readability. I was so impressed by the concept, the ease of use and crucially how much better it made one of my own blog posts look.

My objective was set. I wanted to create a page that would read well on apps like Readability or instapaper.

The following evening I started writing the content for a single page site. I got a few friends to check over the copy until it was concise enough and threw it into a HTML page.

To start with, I just entered the copy semantically marking it up and using html5 markup where applicable.

The next evening I looked at how I was going to format the copy so that if it was treated as a document it would be aesthetically pleasing and legible. I confessing that I dug out inspector in Chrome, headed to the Readability site and took a look at the colour ways they were using and then applied them to the page. Instantly the page started to take some real shape.

I began running through the content looking for where I could apply added value. First hyper linking anything that would be useful, such as my other sites, people I have worked with and my social profiles. Using micro formats I added in functionality for vCard into several parts of the page, there is a traditional contact block in the footer but also a few paragraphs where this could be applied, this was to make some key areas later for adding functionality in for mobile devices.

The layout markup came last taking reference from Andy Clark’s 320andup, along with classes and rules i have always used in projects.

My intention with the page, and possible other pages in the future is to use these to test and show my ideas and refinement techniques for web development.

It was interesting to see Zeldman around the same time redesigned his website, also referencing Readability as one of the main drivers. He talks about this in his 2012 Manifesto.

I want to use byandyparker.com as an evolving design and development, since taking on jobs that are solely focused on User Experience tasks early in 2011 i have not had a great deal of opportunity to keep up my front end coding skills and they’re something i don’t wish to lose.

WordPress Updates UI

Wordpress dashboard now detects browsers and provides some handy tips.

This came up today when I logged into WordPress after pushing out the latest update.

The changes to the UI are subtle, like all good changes. the references points have improved in the navigation, new icons and it would seem some extra little tid bits like this. Look forward to seeing what I discover next.

Working as a User Experience Practitioner

I’ve have a good session this week with Clearsavvy, a new Brighton based startup company that are creating something truly wonderful in the world off web applications.

For the last few months I have been acting as a User Experience consultant for three guys who came to me with an idea, a vision and a desire to revolutionise an industry. Two of these three wise men I have worked closely with in the Past. Roger & Mark both worked with me at Pure360, where I am currently employed as Lead Front-end Developer.

After hearing about their ideas Mike Oxley, Mark Hla and I spent the summer doing research analysis and wireframing before finally getting to a prototype. I wont go into great details, you can check their site and blogs for more on what they’re doing and what we’ve achieved in that time, but suffice to say it was a wonderful experience.

Mike produced absolutely fantastic user profiles and we worked with these people in mind when creating our wireframe proof of concept. We poked and prodded paper sheets and graphic mockups for a few weeks before finally making a box model prototype. For this, Mark had done some research and discovered a web based tool called Mockflow. We’ve had great success with it, particular in that for the first month the guys were all working from their respected homes with me checking in every evening to see what had been done during the day.

As a whole, it has been a really exciting experience for myself. I’ve discovered that it is easier to be objective and see several points of view when you are not directly involved. By this I mean that because I don’t work for the company itself and because I am not developing or building the application, I have the ability to bend on certain things that I perhaps would argue about until blue in the face if it were my own application. It also means that I don’t get quickly bogged down in the technical feasibility of a solution, I can solely focus on the best idea, and this has been a very powerful asset.

A great example of this occurred this week as Clearsavvy began tightening up some loose ends readying to get their application into beta. One of the biggest areas we had looked at was the payment process. We all new it was the make or break part of any application, without a working payment system the application fails and the company doesn’t generate revenue; it had to be perfect.

We had gone through quite a few iterations of the prototype, changing entire layouts or just the order of fields before it started to get coded up. Even then there were one or two parts that in my head I was convinced my solution to certain problems were the only possible to be implemented and other ideas were plain crazy. I decided not to say anything, such is the joy of working as a consultant and allow the guys to put together their concept so it could be played with.

I then got a message.

“Can you pop into CS towers? I got something to show you.”

I took a trip to CS Towers and was taken through the entire application end to end across all the workflows we had outlined in our original plan. We sat chatting for about an hour. Not a word was said about the application.

Why?

I had no questions! To my eyes I had seen a perfect process several times over. It was thoughtful, helpful when you did something it wasn’t expecting (they never say wrong at clearsavvy), and even the hardest part of any site, making a payment was blissfully presented and executed exceptionally. Whatever it was I had been unsure of during my previous visit was gone, I can’t even remember it now.

It’s a great feeling to know that you can walk away from something and not have to worry about it, that it wont be still there on Monday morning. It is even better to be able to walk away and come back to open arms, beaming faces full of excitement and an amazing display of interaction.

The guys have really thought about the ideals and concepts that we had created at the beginning of the summer and have applied it at every turn, never backing down to choose the easy route even if it would have been quicker. I often wonder whether they have a little process that ends with “what will Andy say?”

Both Mike Oxley and Mark Hla write several blogs, all of them are great reads and cover the experiences they’re having as a start up company, development, the company itself and about debt recovery and the industry.

Manage A Startup

Manage A Smile

Beyond The Call Centre

jQuery Hover and why you should use it

jQuery hover is an incredibly versatile and useful shorthand function.

It’s sole purpose is to merge the mouseenter and mouseleave events together.
Why? it saves decleration. Whereas previously you may have create two code blocks, for the enter and leaves event respectively now they can be declared in a single block.

How it works:

The old way would see us creating two separate events

$(this).mouseenter(function() {
something happens when the mouse enters
});

$(this).mouseleaves(function() {
something happens when the mouse leaves
});

The .hover() way:

$(this).hover(
function(){something happens when the mouse enters},
function(){something happens when the mouse leaves}
);

.hover()  has two functions passed into it. Self explanatory but for absolute clarity, the first function is everything that will happen when the mouse enters $(this), the second function occurs when the mouse leaves $(this).

Some may look at this and feel that this isn’t actually saving all that much time. I am still having to pass two sets of actions against the element, why is it better?

If we were turn this into a function – reusable code, we will only ever have to declare the interactivity attributes once. They can then be assigned to any number of elements.

Now we can see we are going to make some serious gains in terms of coding.