Helion-Prime Solutions blog

3 great ways to improve website usability

vasiliy.kiryanov — Mon, 12 Apr 2010 12:10:39 +0000

web heatmap systems

They have been used for displaying areas of a Web page most frequently scanned by visitors, and allow you to understand how people are using your website. This is quite useful to find layouts that don’t work as intended or areas that should be changed.

There are many open-source tools that you can integrate into your site, free solutions and paid services with enormous amounts of features. Just make a Google search, and check few most appropriate solutions.

user testing

There are few steps:
1. Understand what are your users, find out target group.
2. Establish use cases of your system, main flows of your system like: site sing-up, password recovery, post search, etc.
3. Ask some users from target group to go thru all use cases.

Few notes:
Check where users stuck and simplify the flow.
Ask simple questions, let them explain why they made something and if the result corresponded with the idea they had in mind.
Ask them what functionality your site lack?
Ask them what was hard to use on your site.

It can be hard to estimation how many users you may need for testing. Jeff Sauro wrote great article where explained why five users should be sufficient to find most of your interface problems.
Check it: http://www.measuringusability.com/five-users.php

log analysis/analytics

You can get a lot of useful information that can make your site better by analyzing information from logs or by installing external tracking tools.

Features that can help to improve site usability:
Visiting by days of week and rush hours,
Domains/countries of hosts visitors,
Most viewed posts and exit pages,
Browsers used,
HTTP errors,
Screen size, etc.

Deployment of Ruby on Rails applications on OpenBSD

alex.shapovalov — Mon, 05 Apr 2010 12:35:56 +0000

Preamble

In this post I will define typical production environment on OpenBSD OS for deployment of Ruby on Rails applications.

There are few common things:
1. The Ruby on Rails framework doesn’t support concurrent running in multiple threads within the same process, and so to scale it and fully utilize available hardware we need to execute application in several processes.
2. We need load-balancer to spread incoming requests between application instances.
3. We need separate web-server to serve static content.

Overall configuration

At first all incoming HTTP requests from a clients come to httpd web-server, it servers all static content, and send other requests to HAProxy.
HAProxy receives requests and selects free Thin instance, forwards the request to it, receives a response and passes it back to httpd.

Following diagram should give you basic understanding about common work of components :

OpenBSD Httpd – standard OpenBSD web-server

I suggest OpenBSD standard web-server as you can find it as part of OpenBSD base installation, it checked for security issues and being updated as part of OpenBSD. We will use it to serve static content and don’t bother our Thin servers.

file: httpd.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

BindAddress SERVER_IP_ADDRESS

# Dynamic Shared Object (DSO) Support
# caching proxy
LoadModule proxy_module /usr/lib/apache/modules/libproxy.so

# allow Symbolic Links for root of our static content and all sub-directories

Options +FollowSymLinks
ServerAdmin ADMIN_EMAIL

# path to root of our static content
DocumentRoot /var/www/railsdocs/RAILS_PROJECT/public
ServerName SERVER_NAME
ServerAlias www.SERVER_NAME

# directories that contain static content (they excluded from dispatching to HAProxy)
ProxyPass /images !
ProxyPass /stylesheets !
ProxyPass /javascripts !
ProxyPass /500.html !
ProxyPass /503.html !

# address where to send and from receive requests (HAProxy listens that address)
ProxyPass / http://127.0.0.1:4000/
ProxyPassReverse / http://127.0.0.1:4000/

# Disallows remote servers to be mapped into the space of the local server.
ProxyRequests Off

# Don't use incoming Host HTTP request header for proxy request.
ProxyPreserveHost Off

ErrorLog logs/SERVER_NAME-error_log
CustomLog logs/SERVER_NAME-access_log common

see for configuration details: man httpd

For OpenBSD 4.6/4.6 -Stable
It’s the hard part, OpenBSD4.6 has a bug in mod_proxy module so ‘!’ directive doesn’t work.
You have to edit following file: /usr/src/usr.sbin/httpd/src/modules/proxy/mod_proxy.c

Find method: static int proxy_trans(request_rec *r)
in that method after condition: if (len > 0) {
add 2 string:

1 2	if (ent[i].real[0] == '!' && ent[i].real[1] == '\0') return DECLINED;

so final part of code:
…

1
2
3

if (len > 0) {
if (ent[i].real[0] == '!' && ent[i].real[1] == '\0')
return DECLINED;

…

Then recompile your system, it’s common procedure for following -stable so you should already know it otherwise see for details for building instructions: http://www.openbsd.org/faq/faq5.html

Thin – high performance ruby web server

We need some Ruby web-server, and it seems that at this time Thin provides best performance.
At least we see such results on Thin homepage: http://code.macournoyer.com/thin/

file: start.sh

1 2	# start work instances thin start -C thin-production.yml

file: thin-production.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---
environment: production

port: 4001
address: 127.0.0.1
daemonize: true
servers: 4

chdir: /var/www/railsdocs/RAILS_PROJECT
pid: tmp/pids/thin.pid
log: log/thin.log

user: myuser
group: mygroup

require: []

see for configuration details: http://code.macournoyer.com/thin/usage/

HAproxy – TCP/ HTTP load balancer

As Rails doesn’t support concurrent running each incoming request should be assigned to a separate process. HAProxy can be configured to send only one request at a time to every Thin server, it will always pick instance that is not busy with something.

It provides bunch of other useful things like:
– route HTTP requests depending on statically assigned cookies ;
– switch to backup servers in the event a main one fails ;
– accept connections to special ports dedicated to service monitoring ;
– add/modify/delete HTTP headers both ways ;
– block requests matching a particular pattern ;
for full documentation see: http://haproxy.1wt.eu/#docs

note:
If someone thinks that we could use nginx for that purpose check following performance comparison of HAProxy and Nginx:
http://affectioncode.wordpress.com/2008/06/28/another-comparison-of-haproxy-and-nginx/

file: haproxy.cfg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

defaults
log global
mode http

# provides more detailed information about HTTP contents, such as the request and some cookies
option httplog
# do not to log any session which didn't transfer any data
option dontlognull
# allow the proxy to break their persistence and redistribute connections in case of failure
option redispatch

# the number of attempts to reconnect after a connection failure to a server
retries 3

# the time we accept to wait for a connection to establish on a server
contimeout 100000
# the time we accept to wait for data from the client, or for the client to accept data
clitimeout 100000
# the time we accept to wait for data from the server, or for the server to accept data
srvtimeout 100000

listen project_proxy 127.0.0.1:4000
balance roundrobin

# creates an HTTP 'X-Forwarded-For' header which contains the client's IP address.
# This is useful to let the final web server know what the client address was
option forwardfor

# using “maxconn 1″ improves performance with Rails.
# As Rails instance can process only 1 request “maxconn 1″ force HAProxy to select next free instance

server app1_1 127.0.0.1:4001 check inter 60000 rise 2 fall 5 maxconn 1
server app1_2 127.0.0.1:4002 check inter 60000 rise 2 fall 5 maxconn 1
server app1_3 127.0.0.1:4003 check inter 60000 rise 2 fall 5 maxconn 1
server app1_4 127.0.0.1:4004 check inter 60000 rise 2 fall 5 maxconn 1

# httpd web-server will handle it in case of 503, 504 errors due to it's static content
errorloc 503 http://DOMAIN_NAME/503.html
errorloc 504 http://DOMAIN_NAME/504.html

# statistics page thru http://127.0.0.1:8080
listen stats 127.0.0.1:8080
balance roundrobin
mode http
stats uri /

see for configuration details: http://haproxy.1wt.eu/#docs

3 new great book you should read

vasiliy.kiryanov — Fri, 02 Apr 2010 12:53:53 +0000

Rework

Jason Fried, and David Heinemeier Hansson’s | buy on Amazon

“Jason Fried and David Hansson follow their own advice in REWORK, laying bare the surprising philosophies at the core of 37signals’ success and inspiring us to put them into practice. There’s no jargon or filler here just hundreds of brilliantly simple rules for success. Part entrepreneurial handbook for the twenty-first century, part manifesto for anyone wondering how work really works in the modern age, REWORK is required reading for anyone tired of business platitudes.”
–Chris Anderson, New York Times bestselling author of THE LONG TAIL and FREE

The Laws of Simplicity

John Maeda’s | buy on Amazon

“Keep it simple, Stupid” is an old piece of advice, so much so that it’s often abbreviated as the “KISS principle.” But it’s advice that’s often ignored, and MIT Professor John Maeda aims to change that. . . . Designers and marketers will find Maeda’s book both interesting and useful….”
— New York Post

Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems

Steve Krug’s | buy on Amazon

“It’s been known for years that usability testing can dramatically improve products. But with a typical price tag of $5,000 to $10,000 for a usability consultant to conduct each round of tests, it rarely happens.

In this how-to companion to Don’t Make Me Think: A Common Sense Approach to Web Usability, Steve Krug spells out an approach to usability testing that anyone can easily apply to their own web site, application, or other product.

By paring the process of testing and fixing products down to its essentials, Rocket Surgery makes it realistic for teams to test early and often, catching problems while it’s still easy to fix them. Rocket Surgery Made Easy adds demonstration videos to the proven mix of clear writing, before-and-after examples, witty illustrations, and practical advice that made Don’t Make Me Think so popular.“
– Amazon editorial

Top factors of software development cost

henadiy.atroshko — Fri, 26 Mar 2010 12:09:46 +0000

Location

It depends on where the software is built due to there are countries with cheap labor, tax benefits, etc.
To get valid results we should compare costs based on equal productivity of labor. The productivity estimation is a separate and hard task.

The outsourcing is not only about “Cost savings” it has number of advantages and disadvantages.
Check for details: http://en.wikipedia.org/wiki/Outsourcing

Duration

The duration of development heavily impacts cost, and is not inversely to number of developers, there are at least 2 factors:
1. Work can’t be divided intentionally into several independent parts.
2. Developers should spend part of their time on interaction.

Complexity

The unit cost of software is different for software of different complexity.
Think about corporate blog where bug can cause annoyance and bank(aerospace, medical) software where we can lose millions of dollars or people.

We should distinguish between accidental complexity and essential complexity.

Accidental complexity relates to problems that we create on our own and can be fixed— for example, the details of writing and code optimization or platform related disadvantages for particular software development.

Essential complexity is caused by the problem to be solved, and nothing can remove it— if customer wants program with 10 different features, then those 10 things are essential and the program must do those 10 different things.

Finish line

I’ve noted 3 most influential factors and missed other 997, also some universities created complex theories of software price calculations. But the knowledge of life says that software cost estimation is still hard task and only previous experience together with risk management still work well.

Tools for easy user-interface(UI) prototyping

vasiliy.kiryanov — Wed, 17 Mar 2010 16:22:06 +0000

preamble

Every software development company needs special software to make prototypes of user-interface,
and it doesn’t mater if we do a new system or redesign of old one.
Often people say: they don’t need to prototype or they have special person for such tasks. Don’t believe them, it’s task of developers as well as writing tests.

If you still think differently about prototyping read famous book of Alan Kuper
“The Inmates Are Running the Asylum” : http://www.amazon.com/Inmates-Are-Running-Asylum/dp/0672316498

let’s do prototyping

On Interaction Design Association (IxDA) [http://www.ixda.org/] discussion forum we can find that people use almost any tool to do prototyping: ACD Canvas, Microsoft Word, SmartDraw, Inspiration, Microsoft Power Point, etc.

First of all forget about software for graphic manipulations like: Adobe photoshop or Corell draw, then about software that don’t have any connection to prototyping at all. With such software you will lose your time, and will think that prototyping is hard work for designers.

There are big amount of commercial software to prototype user-interfaces.

As famous commercial software I can note:
Axure: http://www.axure.com/
Adobe inDesign: http://www.adobe.com/products/indesign/
Omnigraffle: http://www.omnigroup.com/products/omnigraffle/
Pidoco: http://pidoco.com/en

great and free applications

Pencil

site: http://www.evolus.vn/pencil/
* Multi-page document with background page
* Good text editing with rich-text supports
* Exporting to HTML, PNG, Openoffice.org document, Word document and PDF.
* Installing user-defined stencils and templates

Mockingbird

site: http://gomockingbird.com/
* Multi-page document
* Good text editing
* Exporting to PNG, and PDF.

Balsamiq Mockups

site: http://www.balsamiq.com/products/mockups
* No multi-page document, and background
* Good text editing
* Exporting only to PNG
* Installing of user-defined elements only thru importing them as a pictures

additional feature: integration to popular project management tools

Still can’t select something

As start point try Pencil: http://www.evolus.vn/pencil/
It should meet all you basic expectations and save your money.

If you prefer to have commercial software that contain all features you ever wanted then try Axure:
http://www.axure.com/