Showing posts with label ui. Show all posts
Showing posts with label ui. Show all posts

Tuesday, January 8, 2013

Software Guidelines: Coding principles, Usability, Test

This is a part of the blog series about (SOA) software guidelines. For the complete list of the guidelines (i.a. about design, security, performance, operations, database, coding, versioning) please refer to: http://soa-java.blogspot.nl/2012/09/soa-software-development-guidelines.html


Coding principle

  • Follow the best practices / style guidelines in your programming environment / programming language. Use automatic style checking (e.g. findbugs, checkstyle, PMD).
  • Strive to self-documented code. Add comments if necessary. Use Javadoc.
  • Use a good IDE (e.g. Eclipse, VisualStudio) and good tools (e.g. SOAPUI for web service test, Maven for build, Hudson for continuous integration, Trac.)
  • Use software configuration management (SCM) system (e.g. SVN)
  • Use proven design patterns and beware of anti-patterns
  • Limit accessibility: e.g. declare classes/methods/fields as private instead of public
  • Loose coupling, strong cohesion e.g. Spring dependency injection.
  • Aspect oriented programming, separation of concerns (e.g.  Spring AOP for logging, security, transaction, error handling, cache)
  • Use declarative configurations instead of programmatic coding for cross cutting concerns (e.g. WS-policy for security) . The code ideally only focus to the business logic, has little knowledge of the framework (e.g. using AOP & declarative transactions in Spring to hide the underlying transaction mechanism).
  • Use templates to reduce coding (e.g. Spring DAO templates, Velocity JSP templates)
  • Use standard library/solutions don't reinvent new wheels.
  • If you use multithreading: beware of locking effects to the performance, beware of race condition
  • Defensive programming:  test before executing (e.g. null checking in Java/BPEL), handle exception gracefully, protect from bad inputs (validate, substitute with legal values).
  • Beware of common errors in your development language (e.g. null pointer exception in Java or buffer overflow in C++)
  • Use abstraction layer (e.g. use JAAS for authentication, DAO layer for database access) for loose coupling / flexibility
  • Choose libraries, vendors, tools carefully, consider e.g. maturity, popularity, support, future viability
  • Use thin clients (more robust, better performance)
  • Use early/static binding for better run-time performance
  • Use pre-assign size instead of using dynamic growth datatype
  • Use pre-assign number of parameters  instead of using dynamic number of params
  • Build the instrumentation up front during coding, e.g. test (TDD, performance measure), logbuild/deploy script.
  • Reuse result (e.g. using temp variables) to reduce number of calls
  • Use implicit interface instead of explicit to reduce method call overhead.
  • If you use asynch/multithreading, do you have message timing/sequencing problem en how to deal with this problem? e.g.  if the software received 3 message events (in arbitrary sequence) which are order interdependent?
  • Write a short "getting started" developer document (e.g. designs, data models, class diagrams, dependencies, configurations, service request/response examples, troubleshooting / error scenarios). This document will be especially useful when you act as an external consultant / temporary project developer or if you need to pass the project to other colleagues (perhaps you leave the company, or have to take another project, or get promoted :).

Version management

·         How the services & wsdl/schemas (e.g. common data model) are versioned?
·         How the services are retired? Do you consider back compatibility? How many back-versions will you keep maintain?
·         Provide standard structures in the software configuration management/SCM folders (e.g. folders for Java codes, BPEL codes, WSDL, XSD, XSLT/Xq,  test codes, server-specific-deployment-plan, project documentations, project artifacts/deliverables).
·         Minimum codes in the SCM, no prototypes (which might ignores some QoS such as security) / deprecated codes in the head SCM revision. Put the prototypes in the branches.
·         Minimize the amounts of jms resources: use the same channel for different message versions (e.g. identified by version tag in the soap header/namespace) so instead of using 3 topics (updateEmployee1.1, updateEmployee1.0, insertEmployee1.0) you can use only 1 Employee topic for better manageability & performance. If your service can only process a specific version, use selective consumer pattern http://www.enterpriseintegrationpatterns.com/MessageSelector.html.

Test

  • Have test cases created for (all) user cases and functional requirements? Do you test all SLA/non-functional requirements (e.g. response time, availability/robustness, compatibilities)? Are the test cases tractable to the requirement numbers?
  • Have test cases were created for all exceptions (negative tests), include network failure
  • Have you test variety of data input (valid, invalid, null/empty ,boundary values, long input)?
  • Are the tests are reproducible (e.g. automated, documented, code available in SCM, test case inputs in the database)?  It's advisable to rerun the tests (regression test, performance test) when the administrator add a new module/patch, add a new service, or change configuration.
  • How do you perform regression tests to prevent side effects (e.g. triggered by Hudson/a continuous integration framework)?
  • Do you consider also exploratory tests? If the person who perform the exploratory tests has enough experiences? Do more experience person need to assist him for pair-tests?
  • Does the test environment is comparable with the production (e.g. hardware performance, security constraints, OS/software/patch versions, server configurations)? Do you use a virtual lab to clone the production environment for test (e.g.LabManager)?
  • Use realistic data.
  • See test checklists: http://soa-java.blogspot.nl/2012/09/test-checklists.html
  • Reconciliation test (e.g. for asynchronous processing, for automatic document processing): compare number of input orders with number of fulfilments/ outputs. This test to detect 2 problems: order that never be fulfilled, order that fulfilled twice.


Meer over software test:
Test checklists http://soa-java.blogspot.nl/2012/09/test-checklists.html
Development test http://soa-java.blogspot.nl/2012/09/development-test.html


Usability, GUI, User-friendliness

  • Involve users during GUI design, prototyping, test (e.g. regular Sprint demo)
  • Use iterative prototyping (e.g. Scrum sprint demo) for frequent user feedbacks.
  • Avoid complex pages. Keep it simple. Start with just enough requirement. Design and implement not more than what the requirements need. Use minimum number of GUI widgets.
  • Anticipate user mistakes (provide cancel/undo button,  defensive programming e.g. invalid user input).
  • Minimum user efforts.
  • GUI structure & flow/navigation are clear/intuitive/logicconsistent, predictable.  Use business workflow to drive GUI forms & flows design.
  • Conform to user culture (e.g. domain terminologies) and standard web-style (e.g. colors, typography, layout) at user organization.
  • User documentation / help provided.
  • Update GUI progressively with separate threads (using Ajax for example) to improve responsiveness.
  • Use paging GUI (e.g. display only 20 results and provide a "next" button).
  • Condition the user to enter detailed query in order to reduce the results and minimize the round trips of multiple searches.
  • Update the user with the application status (e.g. progress bar) and the manage user expectation (e.g. Your request has been submitted. You will receive the notification within 2 days.)
  • Inform the user to avoid surprise and confusion when the application will be forwarded to external application (e.g. before OAuth authorization confirmation,  before IDEAL money transaction).
  • Image cost bandwidth (especially for mobiles) so minimize image sizes & number of images.
  • Avoid expensive computation when the user waiting, use asynchronous pattern or render the result progressively.
  • When the backend is busy prevent the impatient users to resent requests that will hinder availability more by informing the user "e.g. your request is being processed, please wait"  or disable the submit button.
  • For mobile web/applications:
    • Reduce information (due to limited screen): use only about 20% information/features from the normal web version.
    • GUI components are big enough and well-separated for finger touch input.
    • Provide links to the normal (PC version) webpage or text-only (low bandwidth) version.
    • Device awareness & content adaptation e.g. viewport according to screen size.
See Web-GUI checklist http://www.maxdesign.com.au/articles/checklist/


Source: Steve's blogs http://soa-java.blogspot.com/

Any comments are welcome :)




Tuesday, March 27, 2012

Firefox add-ons for (mobile) web development

* firebug: html inspect, js debug, css
* user agent switcher: to simulate user agent info from mobile devices
* small screen renderer: to resize the browser to the size of mobile devices, not yet compatible with firefox11, but you can use the web-developer-toolbar instead:
http://tips.webdesign10.com/web-developer-toolbar.htm
https://addons.mozilla.org/en-US/firefox/collections/mozilla/webdeveloper/



Compatibility tables for support of HTML5, CSS3
http://caniuse.com/

Monday, December 19, 2011

Android Simulator : simple up and running...


You don't have a smartphone yet but you're curious about how your website looks like in a smartphone?

Cost: free
Time needed: 5 minutes
Steps:
1. download and install the Android development SDK: http://developer.android.com/sdk/index.html
2. create an Android Virtual Device (AVD) profile: startmenu>manage ACD>create an AVD (e.g. Android 2.3.3 HVGA)
3. run the emulator: e.g. emulator -avd name-of-your-avd




Source: Steve's blogs http://soa-java.blogspot.com/

Any comments are welcome :)

Mobile web development


Why mobile webs are different
You need to adapt your web application since the usability of mobile usage is different compared to the desktop:
• smaller screen size (e.g. 320x480)
• vast variations of browsers & platforms (each with different limitations & compatibilities e.g. some doesn't support javascript yet)
• competing attentions / multitasking users (e.g. the user may use the mobile while waiting for a bus or talking to friends), this leads to more distractability and shorter session (3 min in average instead of 10 min average of desktop users).
• different input devices (e.g. multitouch & virtual keyboard via touch screen instead of desktop keyboard & mouse)

Design strategies
• define user's goals and how they can accomplish their goal in your web with minimum efforts (i.e. minimum clicks/inputs)
• prioritize the features of the desktop version of your web, implement only the top 20% in your mobile version

Usability tips
Simplicity
• implement only 20% of the features of your desktop web application
• minimize user efforts & user inputs, try to infer the context from history/cookies, geolocation, IP address
• no more than 3 clicks (or pages) depth
• limit the main navigation to 4 links, limit the total links in a page to 10
• minimize text, use short/simple words
• to the point, no welcome screen
• limit the bandwidth: simple image, don't use text-image. The bigger the bandwidth, the more users have to pay & the slower your service is.

Layout
• avoid horizontal scrolling
• avoid multi columns
• use all area, 100% width (don't use side menu, side advertisements etc)
• use fluid layout instead of fixed layout

General tips
• always provide a link to the desktop version
• the most used features at the top (e.g. login in a bank service, search in a library service)
• provide enough space (min 20px) for clickable elements and links, since finger touches need more space than using a mouse
• use background colours to separate sections
• use a list instead of a table

Beside these, many of the desktop UI usability rules are still apply in the mobile world, such as visual consistency, legible fonts, clear structure, consistent alignments, etc

Device awareness and content adaptation
A common approach to handle the variations of mobile browsers/platforms is
by grouping according to device/browser capabilities (the groups don't need to be mutually exclusive) for example based on screen resolution, portrait/landscape orientation support, javascript/ajax support, geolocation support, markup languages (old wml,xhtml-mp,html5).

Starting with a basic version of your web (e.g. a plain html without css & javascript), create a different version for each group (e.g. different screen resolution) using different css and technologies (javascript, geolocation, etc).

Your web application needs to aware about the capabilities of the client browser/device and then adapts the content according to which group this device falls to. So first we need to know which browser/device the client uses, using http request header information, for example an (rather old) iphone:

User-Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2_1 like Mac OS X;
en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1
Mobile/5H11 Safari/525.20
Accept: text/xml,application/xml,application/xhtml+xml,


Then using device libraries (e.g. WURFL) to get the list of device/browser capabilities (screen size, javascript/ajax support, etc).

The weakness of this approach is that you need to maintain several versions of your code (e.g. iphone4.css, iphone3.css, android23.css, vintagemobile.css, ....). The mobile/device list is changing fast, you need to keep up with this (and hopefully also the maintainers of the device library you use). The information in the request header & the device libraries may not be accurate. That why it's recommended to limit the number of groups as minimum as possible.

An example of comparison of a desktop and mobile website
Amazon is one of the most progressive dot.com company, we can learn by observing their design. This is the desktop version:


This is the mobile version (Android simulator, 320x480):

The mobile version has
• much less features than the desktop version
• less text, less images
• list (for links)
• one column
• the most important features in the top of the pages (the shopping cart and the search.)

In the future I will discuss how to implement geolocation mobile web to determine in which building a student is located. Based on this, we provide contextual information to the student for example about the course room/schedule, computer labs availability, the locations of other students from the same course/study-year.

Source: Steve's blogs http://soa-java.blogspot.com/

Any comments are welcome :)




References:
Programming the Mobile Web


Beginning Smartphone Web Development


The UI snapshot examples are the courtesy of www.amazon.com