Tech Blog

Ever heard the saying that “You never get a second chance to make a first impression”? Well, that is also true with websites. Despite the improvement and accuracy of search engines, the homepage is the 1st interaction the visitor has with the site, and is the only opportunity to create a good or bad first impression. From experience, the homepage accounts for the largest percentage of abandonment, between 40 and 60%. A poor home page can destroy any chance of achieving your website objectives within a few seconds. A good home page is the blueprint for every successful website. This makes the homepage the most important focus points since it performs numerous functions and caters to multiple stakeholders or audience.

First, the user makes a quick judgment about the site based on the overall appearance. Next, they decide whether they are in the right place by checking out what the site has to offer. Finally, they look around for what brought them to the site. Below are some important guidelines to consider when designing the homepage.

To create an effective homepage, emphasize what your site offers that’s of value to users, this should Include a tag line that explicitly summarizes what the site or company has to offer. In addition, include a short site description in the window title. This will help direct search engine traffic and help keep the users onsite, assuming the title and tags have the necessary keywords.

Use color to distinguish visited and unvisited links, this should actually apply to the entire page, it reduces user frustration.

The page title should realistically target keywords; one key factor in search engine ranking is how closely the title of a page matches the user’s search terms. This will ensure you get the right traffic, hence reduce the bounce rate.

Avoid clutter. Include only essentials that are critical or useful to your visitor’s experience and your branding efforts. Having said that, void distraction and don’t bog your homepage down with too much graphic. Designers have a tendency of focusing on their design prowess while ignoring usability.

Don’t violate design conventions; consistency is one of the most powerful usability principles. Don’t make the user think; when things are always the same the users don’t think about where to find what they are looking for, instead, they know exactly where to go. Saves time and makes them happy.

The last and most important guideline, the users are highly goal-driven on the Web. They visit sites because there’s something they want to accomplish, the ultimate failure of a website is to fail to provide the information users are looking for.
 

I was inspired by last Week’s guest speaker, J Cornelius. The historical development of browsers, from Netscape, to Firefox up until IE7 got me interested. I was also very intrigued by HTML5/CSS3 features. The drag and drop feature is simply amazing. Before HTML5 this could only be done using third-party browser plug-ins such as Adobe Flash. In this Blog I will cover some of the cool HTML5 form features.

Placeholder
Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. The HTML5 placeholder attribute works exactly as the value attribute, except that when the user click on the text field, the placeholder text automatically disappears and the user can easily enter the required information. Browsers that don’t support the placeholder attribute will simply ignore it, without causing any harm. Here is an example of how to include a placeholder in a form

                           input name=”firstname” placeholder=”Please enter your first name”

Autofocus
The next cool html5 feature is Autofocus, if applied; the element will automatically receive the focus once the page is rendered. As soon as the page loads, it moves the input focus to a particular input field. This can be seen on some sites and most search engines. Browsers that don’t support the autofocus attribute will simply ignore it, and the user will have to manually move the cursor to the field. Here is an example on how to use autofocus

                               input name=”search”

Web sites can also use JavaScript to focus the first input field of a web form automatically. For example, the Google homepage will autofocus the input box so you can type your search keywords.

Email Address
Before HTML5, Millions of websites used forms to ask for email addresses, and they all used text input to capture this information. But HTML5 came up with a new type for the input element, named  email.

                          input type=”email” name=”email”

URL Field
Just like the email element, web addresses are frequently asked for. HTML5 introduces a new type for the input element, url, designed specifically for entering web addresses. This line could looks like this

                          input type=”url” name=”url”

Date Pickers
Many companies use websites to book appointments or dates, most of these websites used JavaScript for this function. Thankfully, we don’t have to do that anymore, HTML5 defines a way to include a native date picker control without having to use JavaScript. The date element could looks like this

                            input type=”date” name=”day”

Search Boxes
To enhance ease of retrieving information, many websites have implemented their own search engine. HTML5 has created a new element type for search fields, and a sample of the code could look like this

                            input type=””search”” input type=””submit””

Pattern Attribute
HTML5 comes with the pattern attribute, which lets you define how a user should enter the required information. The form will only accept an entry that matches the specified pattern. A good example is the telephone number or a zipcode field that only takes 5 numbers.

                          input name=”Phone” placeholder=”Phone” pattern=”^0[1-689] [0-9] {8} $”

The cool thing about HTML5 is that in situations where the user is using a browser that does not support the above form element, the fields will be rendered as text, and the user will still be able to type in the details without any problem. So there is no need to panic.

What is Enterprise 2.0?
Enterprise 2.0(E2.0) is technology that brings WEB 2.0 to the Office and enables people to collaborate and form online communities, where they can share and exchange information. Enterprise 2.0 is a push toward integrating the social and collaborative tools of Web 2.0 into the office environment. Enterprise 2.0 in essence is the use of social software platform within companies, or between companies, their partners or customers. Enterprise 2.0 is the next Generation content management.

Enterprise 2.0 Technologies
The Wikis
The business wiki is the simplest forms of E2.0, and is a collaborative system of keeping up with business jargon, business plans and charting the development process. The wiki is very similar to holding an online collaborative meeting.

Micro-Blogging
While it is easy to think of sites like Twitter as a fun way to waste a little time, they actually provide a great blueprint for greater communication and collaboration. Micro-blogging can be used to let teammates know what you are working on and to quickly communicate and organize a group. MicroBlogging helps team members to collaborate and avoid wasting time by re-inventing the wheel, e.g. a programmer can use code already written by his workmate and stored in one of the shared files.

RSS
RSS (“Really Simple Syndication”) is a form of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format. It could includes full or summarized text, and different forms of metadata.

Mashups
A mashup is a web page or application that combines data or functionality from two or more external sources to create a new service. Mashups are content aggregation technologies. The most common forms of mashups are consumer mashups, data mashups or enterprise mashups. Mashups are useful for integrating business and data services and provide the ability to develop new integrated services quickly. Examples of Mashups software are Microsoft popfly, Google Mashup Editor, and Yahoo Pipes.

Podcasting
“A podcast is a digital audio or video file that is episodic; downloadable; programme-driven”¹ A podcast is a series of digital media files (audio or video) that are released episodically and downloaded through web syndication.

Social Bookmarking
Social bookmarking allows a person to store important documents, pages, and to use flexible organizational system to quickly allow them to put a document into multiple categories if needed. It provides an avenue for users to quickly find the information they need. Like an intelligent search engine, social bookmarking lets users search for particular tabs to find documents other people have bookmarked.

Social Networking
A social network is a social structure made of individuals (or organizations) called “nodes,” which are tied (connected) by one or more specific types of interdependency, such as friendship, kinship, financial exchange, dislike, or relationships of common beliefs. Facebook, LinkedIn and myspace are common social networking sites.

Implications on how businesses are using the web
Enterprise 2.0 represents a fundamental change in how businesses operate, communicate or pass information. Traditionally, information was based on a pyramid structure, where information is passed from the top to the bottom and ideas and suggestions were passed from the bottom to the top. With Enterprise 2.0, there is no identifiable pattern; the structure is somewhat chaotic but controlled. Information flows laterally as well as up and down. E2.0 has broken down barriers and increased collaboration and teamwork through use of wiki and blogs, RSS feeds to keep employees informed of events. The contribution of the RSS is more customizable, which allows information to focus on individual interests and activities.

E2.0 has also Increased interaction with customers. All this allow employees to work more flexibly and more efficiently. Enterprise 2.0 has oppened new posibilities, think of the realtor website that provides geospatial information. Lastly, Enterprise 2.0 has enabled businesses to access both structured and unstructured data, making them more responsive to their lifeline, the customers.

¹Center for Journalism and Communication Research at the University of Texas at Austin

What is ITIL?
The Information Technology Infrastructure Library (ITIL) is a set of concepts and practices for managing Information Technology (IT) services (ITSM), IT development and IT operations. ITIL consists of a series of books that give guidance on the provision of quality IT services. ITIL provides a consistent and comprehensive documentation of best practice for IT Service Management. ITIL helps the organizations with effective management of IT operation and associated infrastructure.

A Brief overview of ITIL
There are eight ITIL books and their disciplines are:
1. Service Support
2. Service Delivery
3. ICT Infrastructure Management
4. Security Management
5. The Business Perspective
6. Application Management
7. Software Asset Management
8. Planning to Implement Service Management

ITIL Benefits
ITIL provides a systematic and professional approach to the management of IT service provision, some of benefits that include:
• reduced costs
• improved IT services through the use of proven best practice processes
• improved customer satisfaction through a more professional approach to service delivery
• standards and guidance
• improved productivity

Service Desk (ITSM)
A Service Desk is a primary IT capability called for in IT Service Management (ITSM) and is the single central point of contact between service providers and users/customers on a day-to-day basis. The service desk is the public face of IT and the heart of IT support. The Service Desk function is known under several titles including: Call center, Contact center or Help desk. These points of contact are often used to report incidents or for making service requests as well as providing an interface to users for other ITSM activities such as:

• Problem Management
• Configuration Management
• Change Management
• Release Management
• Service Level Management
• Availability Management
• Capacity Management
• Financial Management
• IT Service Continuity Management
• Security Management

Generally, the Service Desk comes in three types of structure

• The Local Service Desk: to meet local business needs
• The central Service Desk: for organizations having multiple locations and
• The Virtual Service Desk: for organizations having multi-country locations & can be situated or accessed from anywhere in the world

AXIOS SYSTEMS
ITIL has spurred a new industry with many service providers and software; in this article I will feature Axios Systems, an IT Service Management (ITSM) company, and Assist, their ITIL Service Desk Software. Axios has been in the IT Service Management (ITSM) industry for over 20 years delivering enterprise ITSM solutions to customers by building relationships and developing an understanding the business drivers, problems and needs. Axios has served customers in over 100 countries worldwide, in organizations of all sizes and across every industry. As the largest independent vendor focused on IT Service Management, they have developed solutions and services that has made them the leaders in the market. Axios provides, ITSM consulting, ITSM training, Assyst Software and ITSM Project Services. Axios markets itself primarily through its Assyst Software and by promising that it will cut cost, increase agility and increase customer satisfaction.

Case Study
Swisscom: From troubled-ticketing to modern Service Management
Swisscom is the leading telecommunications company in Switzerland with some 17,000 full-time employees. It provides all of Switzerland with comprehensive services and products for mobile, landline and IP (Internet Protocol) based speech and data communication. Five million mobile customers, 3.7 million landline customers and more than 1.4 million broadband customers receive services from Swisscom every day.

Cutting-edge technology is the life support of the Swiss telecommunications group, Swisscom. When its landline division decided to upgrade its IT Service Platforms Operations department accordingly, a choice was made in favor of the de facto industry standard, the IT Infrastructure Library (ITIL), and the entirely ITIL-based IT Service Management (ITSM) solution, Assyst from Axios Systems.  Swisscom decided to introduce systematic Service Management, which was accompanied by the step-by-step introduction of the ITIL process framework. Assyst by Axios Systems impressed Swisscom not only with its functional fit with the stipulated requirements, but also with its potential to ultimately deliver the entire spectrum of ITIL disciplines in one integrated solution.

“We evaluated all the ITSM providers and Axios was the best fit for us. Axios is a dynamic and flexible company that responds to our specific needs.”

“As a partner, Axios Systems has shown competence and flexibility in this project.  Axios Systems is 100% focused on IT Service Management and has understood and delivered our  special requirements and wishes,”  Martin Blocher, System Owner at Swisscom.

The Assyst ITIL Service Desk Software
The Assyst solution is a market-leading enterprise solution for service desk and IT Service Management. It empowers customers to tackle the challenges of ITSM by integrating all service delivery and service support processes within a single integrated toolset to drive rapid improvements in IT maturity, agility and efficiency. The Assyst suite was developed as a consolidated service desk and ITSM solution. It supports ITIL best practices and benefits from over 20 years of research and development.

Unlike other toolsets, the Assyst solution was developed from the beginning as a single integrated solution for ITSM, as opposed to a set of modular toolsets acquired from different vendors.
This gives the solution a number of advantages:

• Easily deploy as many or as few ITIL processes as your organization requires – from simply service desk and incident management, all the way to ITIL V3 service lifecycle management.
• Ability to activate additional processes at any time, without the overhead of a toolset integration project.
• Manage the full lifecycle of an incident seamlessly across problem, change, release, and configuration processes within a single solution.
• One vendor, one product roadmap, one simple upgrade path.
• System stability is superior to other ITSM solutions where disparate products have been merged to form a consolidated ITSM toolset.

Key Features of the Assist include: Incident Logging, Prioritization, Routing and Alerting, Trend Analysis, Investigation and Diagnosis, Tracking and Compliance, Event Lifecycle Management and Dashboards and Reporting

http://www.axiossystems.com/en/solutions/why-axios.php and http://en.wikipedia.org/wiki/Information_Technology_Infrastructure_Library

Most people will notice the similarity between this blog and the previous one, it almost sounds like Web Accessibility 2.o.  As most of you, I found it hard to differentiate the difference between web usability and accessibility, as most topics overlap. Unlike web accessibility which is mainly about making websites accessible with a focus on disabled users, web usability is about making your website usable to all, in such a way that your site users can find what they’re looking for quickly and efficiently.

           ”Usability is like cooking: everybody needs the results, anybody can do it  reasonably well

            with a bit of training, and yet it takes a master to produce a gourmet outcome” ¹  

              According to Jakob Nielsen, Usability can be improved 

What can you do?
Focus on your content. Content will get people to your site and give them the information so they keep coming back. If you’ve created a usable website, The content should be relevant and easy to find, you should see what your customer is looking for. 

Usability on the Web is important in achieving the Website goal. For a business usability is crucial if you want to have customers continue to return and to get sales and make money. If your customers can’t find what they want, they won’t be buying, and chances are, they won’t be coming back. 

Don’t make the user think, the user should be able to see what they are looking for. Your site visitors will not study each menu item carefully before making a considered choice as to which link to select. They might glance down the site menu but, more likely, they’ll just hit the first link that looks about right. Why reinvent the wheel? Use the most common tittles, names and conventions that the users are familiar with. 

Test your site’s usability with your users. Who are your users? What are their tasks and online environment? Test early in design using prototypes. Don’t wait until the end when it’s too late to change the design. If you do nothing else to improve your site, this would be the best thing. 

Architecture – it’s 80% of usability, Build an efficient navigational structure. Put lots of links on your site so that your readers can navigate as easily as possible. This will give your readers a lot of different ways to get to the information on your site. 

Users are impatient. Design for a 2-10 second maximum download. After 10 seconds, your customer has lost interest in your page, and might close the page, no matter how interested they were in the topic. You don’t want to lose the user but you also can’t control all aspects of the download. One way of avoiding this is controlling the weight of the page. 

¹Jakob Nielsen’s Alertbox, http://www.useit.com/alertbox/anybody-usability.html

Web accessibility is access to the Web by everyone, regardless of disability; it refers to the practice of making websites usable by people of all abilities and disabilities. To make this happen, it is important for websites to be based on standards and guidelines. As a result, this makes it necessary for the people involved in building and maintaining these sites to be able to build accessible websites. When sites are correctly designed, developed and edited, barriers to information are eliminated and all users can have equal access to information and functionality.

Apart from designing websites accessible to people with various disability, one other way of increasing accessibility is designing websites that work with all browsers and devices. Since we cannot dictate the browser or device the user will be using, designers need to create websites that render well across all browsers, this can be achieved by adhering to the W3C (World Wide Web Consortium) set of international standards for the web. Using valid, semantic, and well-structured markup combined with accessibility best practices makes for a better experience for many more users.

This will make the site accessible to
• other browsers or operating system
• users that have CSS disabled or do not support it
• user agents that do not support JavaScript
• mobile and handheld devices
• accessibly marked up forms enhance usability for everybody
• users will be able to increase font size without making text unreadable

Accessibility is building one site that works for everybody, disabled or not, and whatever user agent or operating system they prefer. Designing with web standards ensures equality and access to information and resources, users will not be frustrated or abandon a website because some links or tabs to not work.

Typography is the art of designing letters, words, paragraphs, and how they interact with each other, and Web typography refers to the use of fonts, letters and paragraph on the Web. Typography is the main attribute of web design, with some designers believing Typography is 90% of web design. When most people visit websites, the odds are that they immediately look at the text. Visitors typically rely on text to accomplish whatever they’re visiting the site for. That alone should make typography, the art of arranging text, a major priority for any web designer. Bellow are same basic web typography rules

Legibility
One of the principles of durable typography is legibility, to achieve this web designers need to use the right font size. Don’t set body text below 10 or 12PX, and if possible make it bigger. Setting type to big makes it easier for visitors to read the content.

Make good use of Space
Don’t be afraid to leave blank spaces in your pages. Negative or white space will help focus attention on the text. A reader should never have to plow through a forest of buttons and fancy graphics to get simple information

Make Use of Sans-Serif
Always use sans-serif fonts for type on-screen. And remember Arial, Verdana, and Georgia are the only safe fonts for the web. Serifed fonts have a higher chance of displaying poorly, becoming blurry or even pixelated. Avoid fancy type and never use italic type on the web.

Create Contrast
Always use dark text on a light background or vice versa. For example, pale pink text on a pale blue background doesn’t read well. Text exists to be read, make sure that it contrasts enough with the background to achieve that

Always use web safe colors.
Don’t relying on color to achieve legibility, and remember that websites can appear very different on different monitors and browsers, hence the need to make use of safe colors.

Make use of CSS
CSS provide easy consistency between your typography across the entirety of a website. With solid CSS, formatting becomes easy and you can move between pages of your website seamlessly

Web Typography is easily overlooked or not being taken into consideration when designing the site. Spending time on the text can transform the design elements that support the rest of the design and help create a site that is appealing and functional.

The use of the Internet and its impact and effects are continuing to expand throughout the world. The Internet and the web have tremendous impact on business, industry, and the way people interact. Hence, there is a need for websites today to be accessible across multiple platforms, devices and browsers. We cannot underestimate the importance for the websites to be accessible to all; in fact the FCC regulations in the United States require that web sites are accessible to all people, especially people with disabilities. If a website cannot be viewed by someone with impairment, it is not only illegal, but is also discriminating to the visitor.

The solution to most of these problems is to ensure that we are adhering to web standards as best you can within any given project. Web standards are the instructions developed by The World Wide Web Consortium (W3C). The Web Development Standards and Web Design Standards are well-defined methodologies to guide people creating, designing and developing websites.

What are these Standards?
HTML (HyperText Markup Language), the first and most used standard from the W3C. It is also considered to be the backbone of the WWW. The HTML structuring elements (tags) makes the text documents to be interpreted by browsers and displayed according to the specified formats.

XML (extensible Markup Language) XML allows the coder to customize new tag elements according either to a DTD (Document Type Definition) or to one that is personally defined.

CSS (Cascading Style Sheets) This Standard was brought forward by the W3C to create a simpler and more structured World Wide Web. It is a mechanism through which changes in appearance and position can be assigned to HTML or XML elements, simply by declaring specific styles to them.

Advantages of Web Standards
A proper understanding and adherence to certain laid-down norms and practice can make the website more user-friendly, attract larger traffic and achieve better page rank in search engines. Web Development Standards will result in increased traffic, make acceptable all types of browsers, lower production and maintenance costs, and facilitate inter-conversion of web documents. Compliance with web development standards and web design standards will actually simplify the task of most business site builders, contrary to what some people think.

Drawbacks of Designing with Web Standards
Some website builders are apprehensive that web development standards may impose certain restrictions and curb the creative talents. They lament that web standardss impose strict guidelines and require high level coding skills, and that the developer needs to have knowledge of multiple browsers. For any sensible website, in my opinion, the benefit of designing with web standards far outweighs these challenges.

References
http://www.w3.org/
http://articles.sitepoint.com/article/importance-web-standards
http://dustinbrewer.com/why-web-standards-are-important-in-web-design/

Jared had a chance to speak with Luke about some of the latest trends in web input. Jared led the discussion talking about Google’s latest public innovations, Google Instant. Google Instant is a new search enhancement tool that shows results as you type. It’s a much faster service.

They also talked about innovations in web input, where users can instantly have their information on your site without entering it again and again. For the first time it is possible to get rid of entry forms, you can do this by making use of work done by others and using input from other sites. Input can come from anywhere, we can get user information from already existing resources, for example to sign up you don’t have to enter all the information and upload a picture, you can link it to your email, facebook or web extensions to get the same information.

Lastly, Luke discussed Apple’s Ping, it’s social networking site for music, according to him ping is the worst product they have come up with. They ignored market insight, to sign up ping asks you to upload a picture, which has to be approved by google. To make matters worse, the name you use on ping has to match the names on the credit card you used on the itunes site, it does not allow you to use an alias or any other pseudonym for that matter. And to share music on ping, you have to go through itunes, you cannot share music from the collection of music you purchased through itunes. He called it a “social networking site for itunes”.

I chose to write a summary on the Top 10 Information Architecture Mistakes by Jakob Nielsen,¹ which I found interesting and informative. But before I go into the main topic I would like to make a brief definition of Information Architecture (IA).

Definition of IA
Even though it’s quite tempting to skip ahead and talk about the look and feel of a design, the importance of first defining Information Architecture (IA) can’t be overstated. As a discipline, it’s not really clear on what information or architecture really means.

In his book, Information Architecture for the World Wide Web, Peter Morville defines information architecture this way:
in•for•ma•tion ar•chi•tec•ture.

1. The structural design of shared information environments.
2. The combination of organization, labeling, search, and navigation systems within web sites and intranets.
3. The art and science of shaping information products and experiences to support usability and Findability.
4. An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.²

Information Architecture (IA) is everything about its context, how information is used, how it flows, and how it fits within the user’s needs. This type of understanding is the first step taken in order to shape a design that is more functional, transparent, and user-friendly.

Jakob Nielsen divided IA mistakes into two parts, Structural mistakes and Navigational mistakes, the two must support each other and integrate with the search function.

Structural mistakes
The First mistake common with new sites, mostly e-commerce sites is No Structure, where a site is treated like one big swamp, with no organizational structure. This hampers the site potential since the users will not be able to make good use of the site and leave frustrated.

The second most common structural mistake is Not Integrating Search and Structure. When users land on a site, they will more likely want to go straight to the item or page they are looking for. They will also want to know where they are after clicking on a link generated from the search results. This can only happen when the search system and structure support each other. Usability is exacerbated when search and navigation fail to support each other.

The Next structural mistakes is Missing Category Landing Pages, Nielsen recommends that sites have a series of categories that each link to their own landing page that gives users a section overview, without this users can misunderstand the site’s scope and miss important details, products, or services.

Avoid Subsites/Microsites Poorly Integrated with Main Site, too often abandoned microsites link to old marketing campaign, which might not link to the website goals and undermine the online strategy.

Navigation Mistakes

Invisible navigation is as nearly as bad as no navigation. Uncovering navigation shouldn’t be a major task and should be made permanently visible on the all page. Users should not have to use the back button on the browser every time they want to go back to the main page. On the same note, avoid “banner blindness bleed” where the navigation itself looks like a banner, or you place it next to elements that look like advertisement. The Macy’s website suffers from this problem.

Avoid using Uncontrollable Navigation Elements, moving navigation elements tends to distract the user while they are trying to find their way and may lead to user frustration.

Lots of sites have Inconsistent Navigation, where they change their navigation features as users move around, making them feel lost. Users should be able to understand it immediately, and apply that understanding throughout the site, for example, a user should be able to locate the menu items all the time.

Lastly, avoid using too many navigation techniques, each technique has its place and use. And don’t forget to make use of recognizable menu terms. This increases usability and carries SEO weight. Avoid using made up menu labels.

¹ http://www.useit.com/alertbox/ia-mistakes.html

²http://www.audettemedia.com/blog/seo-guide-information-architecture/