helion-prime
home about us blogs contacts

Archive for the ‘web-development’ Category

3 great ways to improve website usability

Monday, April 12th, 2010

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.

heatmap screenshot

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.

related links

Scrolling and Attention : http://www.useit.com/alertbox/scrolling-attention.html
Do users fail a task and still rate it as easy? : http://www.measuringusability.com/failed-sat.php

also I want to recommend 1 book that impressed me:
Steve Krug’s “Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems”

Tools for easy user-interface(UI) prototyping

Wednesday, March 17th, 2010

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

pencil editor

Mockingbird

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

mockingbird editor

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

balsamiq editor

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/

Log rotation in Ruby on Rails applications

Thursday, November 19th, 2009

preamble

Even on mid-size applications logs grow enormously fast, it’s a pity Rails doesn’t provide built-in functionality for that like Apache web-server does. Fortunately there is an easy and fast solution for that issue.

1. Install cronolog

“cronolog [http://cronolog.org/] is a simple filter program that reads log file entries from standard input and writes each entry to the output file specified by a filename template and the current date and time.”

For details, and list of parameters see: [http://cronolog.org/usage.html]

On GNU/Linux Debian:

# apt-get install cronolog

2. Setup your Rails application

Edit necessary environment file: like ‘config/environments/production.rb’ file

1
2
3
4
5
# system logger configuration
# config.logger = SyslogLogger.new

config.logger = Logger.new(IO.popen("FULL_PATH_TO_CRONOLOG log/production.log.%Y%m%d", "w"))
config.logger.level = Logger::INFO

That’s all, fast and easy .. Enjoy!

Easy image scaling for RoR developers

Monday, November 2nd, 2009

We have common task: image scaling [http://en.wikipedia.org/wiki/Image_scaling], and correct understanding that: we can’t ask users to provide image of appropriate sizes, just use width and height CSS parameters for images, and thumbnail is always required feature.

Luckily we have ImageMagic library [http://www.imagemagick.org] and program interfaces for popular languages.

install RMagic gem
# gem install rmagick

add small code:

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
require 'rubygems'
require 'RMagick'

class ImageController < ApplicationController

def index

  # determine basic params
  w = params[:w]
  h = params[:h]
  path = params[:path]

  if !w.to_s.empty? && !h.to_s.empty? && File.exists?(path)
      begin
        image = Magick::Image.read(path).first
        transformed_image = image.resize_to_fill(w.to_i, h.to_i)

        # send image
        send_data(transformed_image.to_blob, :disposition => 'inline',
         :type => "image/#{image.format.downcase}")

      rescue Exception => e
        Rails.logger.error e.message
        Rails.logger.error e.backtrace.join("\n")
        render :text => "Error processing image #{type}/#{aliaz}", :code => 404, :layout => false
      end

  end

end

Here to re-size images we use ‘resize_to_fill’ ImageMagic method:
re-size the image to fit within the specified dimensions while retaining the aspect ratio of the original image, and if necessary, crop the image in the larger dimension.

Sure you understand that resizing takes time and so you should cache re-sized images.

For additional info look thru:
[http://studio.imagemagick.org/RMagick/doc/]

Multi-domain applications in Ruby on Rails

Thursday, September 3rd, 2009

preamble

Ruby on Rails is a great framework that still luck some common features, among them: multi-domain support.
Here I will describe fast solution that doesn’t work for every browser and another one that do the work.

Ok, you did your homework and google something like ‘ruby on rails multi-domain’.
Very often provided solution:

edit environment.rb

1
config.action_controller.session = {:domain => '.mydomain.com'}

With that parameter Rails always read cookies from same domain. In real some browsers forbid for applications to read cookies from other domain due to insecurity of that operation. And as Mozilla Firefox in set of browsers that forbid that we just need another solution.

Now it’s clear that we should implement necessary functionality other way.

Here we go:

1. will store session ID in the database(by default Rails2 store it in cookies)

environment.rb:

1
config.action_controller.session_store = :active_record_store

and then execute rake task that create necessary DB migration:

1
rake db:sessions:create

Apply it with: rake db:migrate.

2. setup session parameters

environment.rb:

1
2
3
4
5
6
7
8
9
require "rubygems"
require "active_support"

config.action_controller.session = {
   :session_key => '_myapp_session_id',    # session identification key
   :secret      => '89sHslddfsd98klasdKd', # hash code of session generator(make it random and longer)
   :cookie_only => false,
   :expire_after => 1.week,                # TTL (time to live)
}

3. let’s create session creation handler

application_controller.rb:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
before_filter { |controller|
   opts = controller.request.session_options
   key = opts[:key]

   # use session ID if it's passed
   if controller.params[key]       
      # session initialization with old ID
      controller.session[:nothing]

      opts[:id] = controller.params[key]
      controller.request.session_options = opts
     
      # session initialization with new ID
      controller.session[:nothing]
   end
}

4. session pass

We need to pass session ID as parameter when user change domain name, and within domain we still use cookie.

1
“#{request.session_options[:key]}” => request.session_options[:id]

It’s wise to use session initialization before request.session_options[:id] invocation due to Rails use lazy loading, and session can be uninitialized.
Use something like: session[:nothing].

Pay attention that information that Rails get from cookie has bigger priority, and so if you have some parameter in cookie Rails will use it firstly.

Note:
An attacker can still steal you session ID by sniffing the network, or exploiting javascript, he/she gets the value from the cookie itself. If you care about security so much just use HTTPS.

©2010 Helion-Prime Solutions Ltd.
Custom Software Development Agile Company.