ContrOCC Hackday II

Posted on May 23, 2013 by Luke Canvin

After the success of our first ContrOCC hackday, we’ve decided to hold one every four months, to give the team a day to work on things that they think would make ContrOCC a little nicer in some way, for users or developers.

For all the thinking behind our product hackdays, have a look at our summary of the first ContrOCC hackday.

The day’s projects

Alan upgraded as many of our Visual Studio solutions as possible to VS 2012. 2012 improvements include better support for working with JavaScript, out-of-the-box support for the NuGet package manager, the long-awaited “collapse all” feature in Solution Explorer, and (his favourite) much better support for dark backgrounds in the code editor.

Basel created a new method for managing foreign keys on database tables, allowing us to drop or re-add them with ease via a new stored procedure.

Chris G looked at generating C# wrappers for SQL stored procedures given a directory of SQL files.

Chris started off by looking at using Irony or ANTLR to generate Lexers and Parsers for the SQL but decided these were overkill for what he could achieve in one day. He then put together a rough-and-ready parser in C# to get the name of the procedure, and the name and data type of any parameters. This was then used to produce a file containing a C# class with properties for each parameter and a method for calling the stored procedure using the existing methods in ContrOCC.

Chris is now interested in looking at automation, as well as supporting macros and more complex SQL formatting.

Chris H developed a prototype of bookends for use in performance logging. These record the total duration of an action performed by a ContrOCC user, such as viewing a client. Bookends provide a more reliable measure of the performance actually experienced by ContrOCC users than the individual SQL execution times, and enable log analysis of C# performance problems.

Development of a production quality version of this functionality is highly desirable, although it poses significant technical challenges. In the meantime the prototype as it stands has already given us some interesting performance information.

Julian set out with the aim to reduce the the effort involved in building a new version of ContrOCC; in particular, the need to use SQL Server Management Studio to search the SQL code base for various possible faults. He identified RegEx as the most appropriate tool and added a couple of functions to ContrOCC’s CLR library and added a new check to our check-schema stored procedure. The benefits of this approach are that

The object definitions in the database are tested – not the files in source control, which is important given that some objects are generated programmatically.
It’s done by the automated testing, so faults will be picked up as and when they happen.
The person doing the build has less to do.

Julian now plans on looking at improving the performance of his additions and is looking for other potential uses.

Mark has been looking at converting the Provider Portal user interface tests from Selenium IDE to Selenium WebDriver. The aim is to create a suite of Visual Studio unit tests that can either be run from Visual Studio or from a script for automated testing.

Mark has succeeded in setting up three Visual Studio unit tests that run our simplest UI test in Internet Explorer, Firefox and Chrome. These tests will return errors that say precisely what check failed and on which page. The relevant Selenium DLLs are incorporated into the ProviderPortalUnitTests project and there are (currently) no special configuration settings required.

There were a few issues:

There is an export option in the Selenium IDE that auto-generates C# code corresponding to an existing IDE test. Most of that was thrown away because it was full of unhelpful code and assertion failure text. Instead, Mark created a utilities class that wraps the Selenium commands and returns meaningful exceptions.
Windows Firewall throws up a dialog whenever the Internet Explorer and Chrome tests run. This is because they require an executable server component that has to be in the test directory so that the client driver can find it. There is a workaround, which is to add the path of the server component to the PATH variable on the computer.
The Internet Explorer test has a weird configuration requirement for IE – “Protected Mode” must have the same setting (either enabled or disabled) for all security zones.
Tests would occasionally fail randomly because the test would try to look for an element before the page had finished loading (the “ClickAndWait” command doesn’t seem to exist in WebDriver). Managed to fix this by setting an intrinsic polling period when searching for page elements.

Whether Selenium WebDriver is the correct technology to use for UI testing is still open for discussion but it’s clear that automated testing can be improved and new tools are cropping up to help.

Matthew aimed to make the ContrOCC Data Maintenance tool simpler to use, especially when working with very large and complicated CSV files.

Key features to implement were:

Sorting and filtering of rows
Finding columns easily
Ability to duplicate rows
Managing and creating CSV files easily

As there’s now a lot more stuff on the screen I’ll use a diagram to illustrate the changes.

ContrOCC Data Maintenance tool

For the future Matthew is planning on adding a ‘History’ of the last 10 files that were opened, as sometimes it is necessary to switch between different files. He’d also like to add searching for files and columns based on partial names, such as typing ‘Setting’ in the file or column filter boxes would show results where ‘Setting’ appears in the name.

Mike looked into seeing how feasible it would be to make a significant volume of the ContrOCC documentation/information usefully searchable by developers. Mike wanted to make it as easy as possible to find all the relevant documentation he needed when working on ContrOCC. Mike looked at an indexing and searching feature using the Apache SOLR and related tools. The next step would be to go forward with an implementation to index the documentation in our source control system and ContrOCC wiki pages.

Steph aimed to improve the usability of our internal report preview tool. She wanted to add the ability to paste multiple lines of text from the clipboard into the report SQL text box as this is how it is presented on the ContrOCC troubleshooting menu, and to save a list of most recently run reports as developers often work on several at a time. Steph managed to get these features both working independently in a test program, but ran out of time before I could combine them into a single control and integrate them into the main project, which she’ll save for a quiet moment or the next hackday.

Tom investigated compared the impact of handling auditing by using SQL Server Service Broker to handling it during trigger execution. The aims were twofold. Firstly, to gain some experience in using the service broker, since it might prove useful to us as a tool in our performance arsenal. Secondly, on a hunch that although we don’t perceive auditing to be expensive, there may be a knock-on cost transaction durations and sizes caused by processing auditing information inline.

By the end of the day I had managed to compare three different database configurations whilst performing a complex procedure:

Baseline time with no auditing: 11m 29s
Time with auditing via triggers: 16m 24s (+42.8%)
Time with auditing via service broker and a single log table: 16m 15s (+41.5%)

So there isn’t a clear winner; however there was only had time to gain a pretty limited understanding of the basic principles of the service broker and there may be better ways of using it. This suggests that this is an area that would require considerable investigation time if we were to better evaluate the options. For auditing, the argument is not at all clear that this would yield benefits.

Ulen decided to compare the use of the SNAPSHOT isolation level to NOLOCK. Most of the documentation focuses on the disadvantages of NOLOCK and there is very little that goes into any detail about SNAPSHOT – or most importantly what the risk and overheads are for changing from one to the other.

Ulen wants to take this forward and put in some more dedicated research, so that he can produce a technical paper on the subject for further discussion. Sadly he ran out of time as he was bogged down following an example he found online which quite simply didn’t work the way it was documented! Ulen suggests taking suggestions to move to an Optimistic locking policy with a pinch of salt – they could simply be fans of other database systems who don’t agree with the tried and tested Pessimistic Locking that Sql Server provides.

NHS Hack Day – Dementia Scrapbook

Posted on January 29, 2013 by Reynold Greenlaw

Over the last weekend in January I attended the NHS Hack Day at the John Radcliffe Hospital in Oxford, with friends from Step Up Software and Dr Doctor.

NHS Hack Days are weekend events that brings together doctors, nurses, developers, designers, and other “geeks who love the NHS” to create disruptive solutions to problems in the health space.

Our team worked together on a novel application called the Dementia Scrapbook – a tablet app that allows content to be uploaded by family and friends, which can then be browsed by people with dementia. It doesn’t need user interaction, but if they can touch the screen it responds with content to support their memories.

We successfully scooped the prize from the Health Foundation and now we plan to get started on a simple implementation and open source it on GitHub.

Presenting the Dementia Scrapbook at the NHS Hack day.

Lunchtime mini-conf roundup

Posted on December 14, 2012 by Luke Canvin

At the end of October, we introduced a series of lunchtime meetups in the office, where we’d watch a talk from a conference related to what we do here at OCC; designing websites, software, building databases, writing code, and creating experiences our users and clients will enjoy.

We’ve been getting together for eight weeks now, and I’ve been really pleased to see how many people from all our different teams are keen to spend their lunch expanding their knowledge of familiar topics as well as exploring some new ones.

Here’s what we’ve enjoyed so far:

Client Centric Web Design – Paul Boag

The work we do is not just about building websites or software, it’s also about providing a service to our clients. In this talk Paul looks at how to build a collaborative relationship with clients and produce work far better than we could in isolation. It’s a great talk and includes some really useful pointers on encouraging the right kind of feedback, dealing with disagreements, and educating the client so that they can add value to the project.

Hands-on Prototyping with HTML & CSS – Dan Rubin

We spend a lot of time writing specs, but often an important part of understanding what our customers/users need is to put something in front of them to try. Prototyping can expose many issues and requirements that might otherwise remain hidden and have costly impacts on a project.

In this talk Dan Rubin explores examples from a real life project, explaining the method of testing and prototyping used, and showing the value of making adjustments to a design during testing, exposing changes in behaviour that could not have been otherwise observed.

Sane Structure for JavaScript Apps – Rebecca Murphey

Creating rich and highly interactive internet applications requires a fair amount of JavaScript; some of us have even begun shifting the bulk of our application logic to the client side. Thankfully we have frameworks like jQuery to help, but it’s still down to us to create a sensible architecture for our client side code – something we may not be used to doing.

In this talk Rebecca Murphey introduces us to some of the concepts of structuring modern JavaScript applications, to avoid a tangled mess of code.

Building Large-Scale Applications with JavaScript – Adi Osmani

Addy Osmani presents an effective set of design patterns to help us keep things clean and reusable. You’ll learn how to keep your application logic truly decoupled, build modules that can exist on their own or be dropped into other projects and future-proof your code in case you need to switch to a different DOM library in the future.

When We Build – Wilson Miner

As more of the tools we live with every day become digital instead of physical, our opportunity – and responsibility – as the developers of those tools is multiplying. We live in a world of screens, and we are the ones who decide what goes on them. We are in a unique position to have an impact – one that lasts longer than the next redesign or the latest technology.

What happens when we stop thinking of ourselves not just as developers or experience designers, and take up the mantle as a new generation of product designers for a digital world?

As you can tell, this talk is not about this or that technology or technique, but leans more towards inspiration and aspiration within our field – I think you’ll really enjoy it!

Top Ten Things Every Designer Needs to Know About People – Susan Weinschenk

Our products are designed to elicit responses from people. We want them to understand, buy, read, register, or take action of some kind. Designing without understanding about people is like exploring a new city without a map: results will be haphazard, confusing, and inefficient. Dr. Weinschenk has picked her top ten things that you need to know in order to design intuitive and engaging applications, websites and products that match the way people think and work.

Introducing SQL Server 2012 Transact-SQL Improvements – Aaron Lower

An introduction to the new SQL features introduced in SQL Server 2012, including query pagination, over clause windowing, sequence generators, metadata discovery and t-sql’s enhanced function library.

CreativeJS – Beauty in the Browser – Seb Lee-Delisle

Now that Canvas and SVG are available natively in all major browsers, JavaScript can be used to create some impressively advanced visuals with relatively simple code. Seb Lee-Delisle introduces us to particle systems, blending effects, optimised animations, gaming and good old maths creativity.

ContrOCC Developer’s Hackday

Posted on December 14, 2012 by Luke Canvin

We recently held the first ContrOCC Developer’s Hackday, which was all about giving the team some time to work on things that would make the product a little nicer for them in some way. For example:

A development task or bug that’s getting on their nerves but which isn’t getting scheduled
Improving developer tools
Experimental development which might or might not work
A prototype solution or toy program to demonstrate an interesting idea
A spec or mockup for something more complex you’d like to work on
A collaborative project with other developers

As well as improving life working on ContrOCC, we hoped that the day would be a welcome break from our scheduled plan, and with everyone taking the day off together there would be the chance for a bit more interaction than usual with people taking an interest in what everyone was tinkering with.

We decided that the team would decide in advance what they wanted to work on, to help give as much time as possible on the day to implementing their ideas. The only ideas that had any sort of vetting were ones that proposed committing code to official repositories or tools.

The team’s technical leads were available all through the day for questions, discussions and advice, and the whole team had lunch together in our pool room to chat about what they were up to.

The day’s projects

Alan looked at improving the status summary page for ContrOCC’s automated tests, switching to an HTML grid view with on-hover result details.

Chris developed a prototype version of “Did You Know?” tips to be displayed when ContrOCC starts. We have a long list of functionality we’d love to draw users’ attention to, and this would be a great way to introduce users to features they may not have known about.

Chris’ prototype of a “Did You Know?” tip.

Jo worked on improving ContrOCC’s help documentation; tackling some problem pages and researching how we might improve the help-generation tool we use in order to create help that is more tailored to a user’s specific needs.

Julian looked at how we could adapt our database performance monitoring tools to help us better record and analyse performance information. He identified the most useful data to monitor and created SQL scripts to allow us to quickly set up and run the tools, and analyse the results.

Mark researched improvements to ContrOCC’s web service technologies; looking at how feasible it would be to upgrade from Web Services Enhancements to Windows Communication Foundation.

Mike developed a tool to extract details from ContrOCC’s database schema and visualise them in a web browser. He used HyperTree from the JavaScript InfoVis Toolkit to provide an interactive view of ContrOCC’s database tables and relationships.

Mike’s visualisation of the ContrOCC database.

Steph spent her day cleaning up compiler warnings from the ContrOCC C# projects, allowing her to enable the “treat warnings as errors” build setting so that we can ensure no new warnings sneak in.

Tom worked on using the Microsoft Entity Framework tools to reverse engineer a layer of ContrOCC object model C# classes that maps to the database schema. Whilst the relative immaturity of the Entity Framework tools alongside the complexity of the schema meant that generating a UI from the model layer was not possible for the system as a whole, Tom did identify some sub-sets that would be good candidates. Tom also noted that probably the best use for Entity Framework would be in replacing Test Perform Actions – with C# wrappers providing intellisense.

Tom’s ContrOCC Entity Framework.

Ulen looked into improving the automation of ContrOCC’s component tests, which currently involve a fair amount of repetitive effort. He got a prototype up and running and plans to continue work on it as part of his training time.

We think the day was a real success and aim to hold them regularly.

Replacing trigger-based validation with foreign keys

Posted on November 27, 2012 by Julian Fletcher

Several techniques are often deployed in well-designed databases to minimise the amount of invalid data. Common ones include:

Check Constraints– checks that can be made on a single row in a single table, for example:
- StartDate <= EndDate
- Height > 0
- Age < 199
Unique Indexes– to make sure we don’t have duplicate entries in a table, for example:
- National Insurance Number
- Car Registration Number
Triggers – a last resort for cases where “it’s complicated” or we have to check data from more than one table.

Foreign keys are also often used to check data from one table against that in another to ensure its referential integrity. For example:

If a Product has a Category ID of 27, then there is a Category with an ID of 27.
If an Employee relates to a Department, the Department exists.

If we want to make additional checks, for example that the Category is of a type appropriate for the Product, or that the Department hasn’t been soft-deleted, these generally have had to be implemented via code in triggers. (One alternative, of implementing cross-table validation using check constraints, can have serious performance implications.)

Check constraints, unique indexes and foreign keys are good both from a performance viewpoint and also because they provide essentially code-free validation. Doing validation in triggers is far from ideal for several, well-documented reasons (such as performance and the need to replicate the same validation in more than one trigger).

So wouldn’t it be good if we could somehow replace trigger-based validation code with foreign keys, which are, after all, all about checking the data in two tables? The following two examples outline an approach in which the use of foreign keys is extended beyond the normal “does that ID exist?” check.

Example 1

Table InvoiceItem has two columns, ExpenditureExpenseCodeID and IncomeExpenseCodeID, both of which reference the Primary Key ExpenseCodeID column of the ExpenseCode table:

However, each ExpenseCode can be marked as being suitable for income only, expenditure only or both via a nullable IsIncome column (where a value of Null means both).

One option would be to put each type in to a separate table (e.g. ExpenseCodeIncome, ExpenseCodeExpenditure or ExpenseCodeBoth) but that would be a bit unwieldy (not only because ‘both’-type rows would have to be stored in all three tables).

Instead, validation code is typically added to InvoiceItem’s trigger to ensure that only appropriate ExpenseCodes are chosen for IncomeExpenseCodeID and ExpenditureExpenseCodeID. (The same validation has to be carried out in ExpenseCode’s trigger in case an attempt is made to change its IsIncome column.)

In the new approach, we have two additional columns in the ExpenseCode table, computed as follows:

ExpenseCodeIDForIncome =
	Case When IsNull (IsIncome, 1) = 1 Then ExpenseCodeID
	Else -ExpenseCodeID End
ExpenseCodeIDForExpenditure =
	Case When IsNull (IsIncome, 0) = 0 Then ExpenseCodeID
	Else -ExpenseCodeID End

So we might have:

ExpenseCodeID	Description	IsIncome	ExpenseCodeID ForIncome	ExpenseCodeID ForExpenditure
1	I-3875	1	1	-1
2	E-9872	0	-2	2
3	4431	Null	3	3

We could then change the foreign keys from the InvoiceItem table; instead of referencing ExpenseCodeID, the one from IncomeExpenseCodeID would reference ExpenseCodeIDForIncome and the one from ExpenditureExpenseCodeID would reference ExpenseCodeIDForExpenditure. In both cases, if the record referenced in ExpenseCode was not appropriate, the calculated column would have a negative value and an error would result.

Example 2

This one is slightly more complicated. We have two tables, Product and Category. Each Product has a Category.

Both can be soft-deleted but we do not allow Products to be associated with a deleted Category unless the Product is also deleted. Normally, this requirement would be implemented by code in triggers, which would have to be applied to both tables. However, consider a computed column on each table:

In Category: CategoryIDForValidation = Case When Deleted = 0 Then CategoryID Else –CategoryID End
In Product: CategoryIDForValidation = Case When Deleted = 0 Then CategoryID End

Then, we can set up a foreign key between these two columns which will only be violated if the record in Category is soft-deleted while the record in Product isn’t. Here’s a table listing the possible combinations:

CategoryID	Deleted	CategoryID ForValidation	ProductID	CategoryID	Deleted	CategoryID ForValidation	Allowed?
10	No	10	20	10	No	10	Yes
11	No	11	21	11	Yes	NULL	Yes
12	Yes	-12	22	12	No	12	No
13	Yes	-13	23	13	Yes	NULL	Yes

The foreign key won’t attempt to link any records where CategoryIDForValidation is NULL in Product and will succeed where both records are undeleted. However, if the Category has been soft-deleted by the Product hasn’t (third row), an error will be thrown.

Summary

This technique provides a way of replacing trigger-based validation with foreign key validation in some, but not all, situations and has the following benefits:

Improved performance
Elimination of duplicated code

Client Centric Design – Lunchtime mini-conf

Posted on November 1, 2012 by Luke Canvin

We have introduced a new series of lunchtime get-togethers at the OCC office, where we watch a talk from a conference related to some aspect of our industry. These will cover a wide-range of subjects including design, development, working with clients, user experience, creativity and data.

The first talk was “Client Centric Web Design”, from DIBI 2012, where Paul Boag speaks about how to build a collaborative relationship with clients and produce work far better than we could in isolation. It’s a great talk and includes some really useful pointers on encouraging the right kind of feedback, dealing with disagreements, and educating the client so that they can add value to the project.

You can watch the video online and you can also find out more about Client-centric design on Paul’s blog – if you scroll down to the “podcast” section, each episode has a full accompanying blog post, so you can read instead of listen if you prefer.

In discussion afterwards, we noted that the following points were particularly useful to take away:

Create a relationship with your client where they give you problems and you provide the solutions. This will help bypass the issues that arise from your client attempting to give you solutions when they are not the expert and may not have fully thought through the problem.
Create video snippets to demonstrate new features/designs to the client, it ensures they will hear your thoughts and justifications for the choices you have made, and doesn’t leave them in the dark simply trying to decide if they like it.
When getting feedback on your work, rather than ask “what do you think”, which invites them to express their personal opinion, ask very specific questions that demand a yes/no answer. For example, “will the target audience be able to easily complete their tasks?” or “Does the product reflect what was agreed in the specification?”.

The first point was a topic of further debate. It’s easier for many clients to describe hypothetical solutions, and there is certainly a skill to be developed in turning their description into the definition of a problem they are trying to solve, and then working from there.

Windows 8 tips for developers

Posted on September 14, 2012 by Luke Canvin

Microsoft’s Windows 8 is due to be released on October 26th 2012, but it’s already in it’s final state and is available to businesses through MSDN.

I’ve had the opportunity to use Windows 8 as my primary development machine for a couple of weeks now and there’s been a bit to learn, particularly due to the introduction of the Start screen (or simply “Start” as it’s usually referred to) and full-screen apps. I’ll skip the obvious stuff, as I’m sure you’ll have that figured out in seconds, and I’ll share what I’ve had to figure out in order to make Windows 8 a little more developer friendly.

Start

The most evident change in Windows 8 is the switch from start menu to start screen, whilst this takes a little getting-used-to you’ll be flicking in and out of it in no time, but there are some customizations that are a little hidden away.

Managing app groups

To re-order or rename your groups of apps, whilst on Start press Ctrl+- (that’s the Ctrl key and the minus key; you can also hold Ctrl and scroll down using the mouse wheel) and your view will zoom out. You can then drag the groups to re-order them, or right-click on a group to show a “Name group” option in the app commands menu.

Where is the contents of Start?

When you’re in Start itself, there is little you can do to customize the shortcuts other than to remove them, and if you right-click on an empty space to bring up the command menu and view “All apps”, you can be presented with a messy list of all the stuff the programs you have installed decided to stick in the start menu.

Go get back in control, you can find the contents of Start in the following locations:

C:\Users\your-username\AppData\Roaming\Microsoft\Windows\Start Menu\Programs – this is your personal content
C:\ProgramData\Microsoft\Windows\Start Menu\Programs – this is the content for all users, including you

Note that Start will flatten out the files in all sub-directories of a directory in either of those folders and show all the contents in one list under the heading of the first folder.

If you make any changes, you’ll probably need to restart Windows Explorer before they take effect.

How do I pin a shortcut to a Remote Desktop on Start?

If you have saved a Remote Desktop connection, you might notice that when you right-click on it, there is no “Pin to Start” option. To work around this, create a new, blank shortcut and set the following as the location:

%windir%\system32\mstsc.exe "C:\your-directory\your-connection.rdp"

You’ll then be able to right-click that shortcut and pin it to Start. You can even customize it with a useful icon if you want.

Hotkeys

For most developers I expect shortcut keys will become even more important with Windows 8 as a way of getting quickly to what you’re after.

The most important hotkey for power users is Win+X, which opens a menu in the bottom left of the screen with a whole host of power-user options. You can also get this by right-clicking in the bottom-left corner of the screen.

Here’s a list of other useful hotkeys:

Hotkey	Action
Win	Switch between Start and Desktop
Win+R	Opens the “run” dialog; more important now the start menu is gone
Win+Q	Open the app search
Win+W	Open the settings/control panel search
Win+F	Open the file search
Win+PgUp/PgDown	Move a full-screen app between monitors
Win+PrintScreen	Takes a screenshot and saves to \My Pictures\Screenshots
Win+C	Open the Charms bar
Win+P	Opens “second screen” charm
Win+I	Opens the settings charm

Full-screen apps

I suspect full-screen apps may be of limited use to a developer, as they’ll be spending most of their time with the desktop working with windowed apps, but as the Windows Store takes off we’ll start seeing more and more useful full-screen apps available.

Remote Desktop App

Not installed by default, but well worth a look, is Microsoft’s Remote Desktop App, which presents a very nice full-screen experience for opening and switching between remote desktop sessions. As I tend to keep remote desktops full-screen anyway, this app makes that just a little nicer.

How do you close a full-screen app?

Although apps are frozen (and eventually closed) to use minimal resources when they’re in the background, you might still want to close them from time to time. The easiest way to do this is to move your cursor to the top of the screen so that it turns into a little grabby-hand, then click and drag the app to the bottom of the screen; when you release it will disappear.

Windows Explorer

The Ribbon

Explorer windows now come with the ribbon, it’s minimised by default, but clicking on any of the tabs will make it pop open. There are a couple of very handy shortcuts in the ribbon that I now find myself using regularly:

Copy path – On the Home tab, in the Clipboard section, this button will copy the path of the currently selected file or folder.
New folder – A nice big button on the Home tab, also shown by default in the quick-access toolbar in the Explorer window title bar.
Show/hide – A convenient section on the View tab allowing you to quickly choose to show/hide file extensions and hidden files/folders.

Task Manager

When you first open the new Task Manager it looks a little pathetic, but click “More details” and it’ll show you a wealth of information never included in Task Manager before:

Processes – The CPU, Memory, Disk and Network usage of all your apps and background processes, with great use of colour to highlight resource-hogs.
Performance – A detailed breakdown of your PC’s resources with clear charts and stats.
App history – Monitoring the total CPU time and network usage of your full-screen apps.
Startup – What starts-up with your PC, including an assessment of the impact on the startup process and option to disable.
Details – The classic Task Manager view.
Services – Start, stop and restart your PC’s services without needing to open the Services tool.

UX best practices from homepage to checkout – UX Oxford

Posted on September 12, 2012 by Luke Canvin

UX Oxford‘s September talk was given by James Chudley and Jesmond Allen from cxpartners on UX Components Deconstructed.

James and Jesmond are the authors of ‘Smashing UX Design: foundations for designing online user experiences’ and in this talk they focus on their advice for providing the best user experience on common website components; the homepage, category/product listing, product page, shopping basket, and checkout.

You can find the slides for the talk embedded at the end of the post.

Homepage UX

The first things we want to understand are the most common user tasks for the page, and how these compare with the business goals.

Example user tasks

What is this site for?
Let me get on with my task
Reflect what I’ve done on this site

Example business goals

Provide information on products and services
Make a good first impression
Commercial motivations such as showing advertising, gaining subscriptions, etc.

As designers we’re somewhat caught in the middle of these often conflicting user and business requirements, so it’s important we understand where the business’ priorities lie and how best to balance the functionality of the page.

Top tips for homepages

1. The homepage is less important than everyone thinks

We often begin work on a website by designing the homepage, but how many homepages do we actually see? Perhaps it would be better to begin with other key pages, such as the product detail page.

2. Consider every homepage state

The homepage may need to change radically between states. For example, if a user is logged in they may need their account links, recommended products, previously viewed pages, favourites, messages, etc. These different states will all need care and attention so, when quoting, don’t forget the time you need for that.

3. Avoid homepage bloat

A site’s various stakeholders will all have their own priorities for the homepage and this can lead to more and more features being squeezed in there. A good tactic to avoid this is to use the user requirements to focus the functionality of the homepage on what’s important to them.

Category and product listing page UX

Example user tasks

Does the site provide what I need?
Filtering and sorting the list
Understanding differences between the offerings

Example business goals

Show abundance and range
Show expertise
Explain the offerings

Here we need a careful balance between showing breadth and allowing the user to focus on what they are looking for.

Top tips for category and product listing pages

1. Task models are invaluable

We must understand the user’s decision-making process through user research/testing in order to provide the right information at the right time. Creating a task model is the perfect deliverable for this and the client may never have seen their customer’s thought process mapped out in that way before, which could be incredibly useful to them.

An example task model from James & Jesmond’s presentation.

2. Prevent “pogoing”

Pogoing is the action of switching back and forward between pages (e.g. listing and product pages) in order to get the information you need.

Think about the key information required to make a decision and provide that up-front.
Don’t go overboard, less important or more detailed information should still be reserved for the product page.
Allow users to choose to show all products rather than having pagination.
Some research shows that having an odd number of products in a row (if your listing has rows) might make it easier to make a choice.

Product page UX

Example user tasks

Is this the one I want?
Is it in stock? What’s the delivery cost? Is it in my size? Other fundamental questions.
What happens if I buy and it’s not the what I want?

Example business goals

Sell associated products
Use reviews to encourage sales
Make it easy to buy

Top tips for product pages

1. Plan for the most complicated products

Identify all the different types of products that you’ll need to cope with and ensure you plan/quote for all the variants.

2. List all the customer’s questions and answer them

Unanswered questions are one of the main reasons people don’t buy. You can draw on user research and task models to find the questions.

3. Think about your photos

Images have a huge influence on behaviour so focus on product photos in use research and make sure you’re involved with image selection for the final design.

James has a blog looking further into this topic at photoux.co.uk.

Shopping basket UX

Example user tasks

Make final decisions
Understand costs
Feel comfortable with charges
Feel safe

Example business goals

Reduce abandonment
Encourage choice of the most business-friendly delivery option
Inspire return visits
Reduce customer services contacts

Top tips for shopping baskets

1. Be trustworthy

If the user trusts you, they will more happily spend money. You can enhance trust by displaying phone/address details (customers often look for these to prove you exist in the real world), keeping bug-free, using clear language, and showing your costs/charges clearly.

2. Shopping baskets are used as shortlists

Even when dedicated shortlists are provided! Support this behaviour and show important product details/links in your basket. Perhaps allow the user to convert their basket into a shortlist.

3. Don’t instil security fears

Large security logos and talk of security all over the place can scare customers by making them overly aware/wary of online security issues.

Take ownership of your security messaging, make it subtle and trustworthy. Use HTTPS and the user will see the padlock in their address bar. Use familiar URLs during the checkout process.

4. Don’t make assumptions about the user’s context

The user journey may be on any type of device or may switch between several, so support this wherever possible.

Group discussion

After the presentation there was some excellent discussion on topics including:

When to ask for user registration – start vs. end of checkout.
Use of Facebook/Twitter logins – do they instil paranoia about the site posting to your wall/status?
Displaying pricing – what happens if your products have varying/sensitive prices?
Guest checkouts – will more people buy if they don’t have to register? Can you convert buyers to registered users after they have bought?

Thank you to Jesmond, James and the UX Oxford team (Cathy Carr, Mariana Mota, James Morris & Al Power) for a really in-depth and practical talk!

UX Components Deconstructed from cxpartners

UX Oxford – User research doesn’t need to be boring

Posted on August 29, 2012 by Luke Canvin

August’s UX Oxford talk was “Research is boring: How we sell it, do it better, and make better use of it.” from Lee McIvor, a freelance user experience designer and the organiser of lightningUX.

As user experience designers, we often come up against the misconception that user research is not important, that a design does not need to be fed by research, but that we can take the “genius” design route, assume that we know what we need to know, save a little time and money, and then evaluate our results via usability testing afterwards.

The problem is that this gives very hit and miss results and we quite often lose out on valuable insights and create a poorer experience by skipping the research step. Research can fuel innovation if it’s done well.

Selling the benefits of user research

Research is often thought of as a scientific process and this can lead to distractions such as focussing on methods and analysis techniques, at the expense of thinking about what the research is attempting to discover. We must focus on the problems we are trying to figure out, and the methods will come out of that.

How to do better user research

Usability testing is very popular, it’s fashionable in the web design/development community, but it only tells us the problems with the interface you put in front of the user, not whether you have understood the fundamental problem you are attempting to solve. Usability testing is evaluative.

User research gives you important new data on the problem itself, and the context you are investigating; it is generative.

User interviews (be they face-to-face, or via a questionnaire) are the most common form of user research, but it’s easy to miss out on more innovative approaches, even to this familiar method. For example, Uscreates needed to engage migrant workers, so they set up a touring café campervan and set up outside the workplaces where they were most likely to find their target group.

Your approach can be adapted to fit the needs of the project. You might find you get exactly what you need from informal video taken from a mobile phone, or setting up a twitter/facebook account for your participants to post to. There are even new and inexpensive apps available to make collecting data even simpler, such as dscout, which allows you to set up questions and tasks for your participants and collect their responses along with a photo and date/time/location stamps.

There are plenty of methods out there, each with their pros and cons, so use what works best for the problem you are investigating. It doesn’t need to be expensive, so there’s no reason not to research.

Improving how we use our results

Big reports are the tradition, but they are expensive, intimidating and not easily actionable for most people. So don’t just collect results, analyse and interpret them; tailor the report to what will help the reader understand and take action.

For generative data, tell stories, help the reader empathise with the user, build personas to make the results come to life.

Work collaboratively with your client/researcher to find the solution to the problems you have found.

Summary

Lee wrapped up by presenting three simple take-aways from the talk:

Research is about solving problems
Don’t be afraid to adapt and refine
Speak their language

Thank you to Lee and the UX Oxford team (Cathy Carr, Mariana Mota, James Morris & Al Power) for another excellent talk!

Dealing with personal opinion in web design

Posted on July 10, 2012 by Luke Canvin

Design can be a very subjective matter. All of us have our personal likes and dislikes when it comes to the appearance of the products, tools and websites we use, but it’s important for both the designer and client to set those aside when you’re working on a web design project.

Websites are designed for their audience, for the users that the owner is hoping will visit and complete some transaction or task. As part of the user-centred design process, we research the users; create personas and use-cases for them, so that we can better understand how to tailor the site to their needs. And yet it’s very common for feedback to come in from members of the project team (on both sides) that involve personal opinion. For example, “I don’t really like the use of green in the sidebar”, or “Perhaps the product image should be a little larger”.

We need to remember that we’re not designing for ourselves, we’re designing for our users and so we need to set aside our opinions and think in terms of evidence. On what basis were these design choices made, and is there evidence to suggest that a different approach would be better?

Andy Clark of Stuff & Nonsense spoke about his approach to this subject on the Boagworld podcast offering the suggestion that if the person persists in pushing their opinion then you could offer a compromise:

“We’ll look at both versions, your version and my version; we’ll launch with my version and then we’ll test yours separately and see if it’s better.”

This puts weight in the designer’s approach, based on their experience and training, whilst exploring the suggestion and incorporating it at a later date if it proves itself through testing.