UI Design Challenges

Microsoft has many products built using Asp.Net platform (including SharePoint), and this means that we will have a lot of flexibility in implementing a new UI design. But what will happen if we consider hiring a Specialized Designers to implement all these flashy effects and try to fit them to our product. This post gives you some General Challenges that you might face during this scenario. In addition, it will provide you with some useful solutions.

Main Challenge

The challenge started when a company asked us to implement their new Portal, but the design itself would be implemented by another company. In addition we have to Integrate & Implement their new design over the Portal. As we proceeded we faced some of the below issues:

Issue # 1 – Extensive usage of JavaScript:

Since the design is implemented by a separate company, most of the page had a lot JavaScript injected in them which caused the following:

1. Slow page loading time (especially the first run), since it needs to load a lot of client side scripts before it runs correctly.
2. Browser Compatibility Problem, since some of these scripts was not supported by well-known browsers (Internet Explorer, Netscape, etc.).
3. Long UI Implementation Time, since most of the HTML Pages sent by the design company need to be converted to Layouts & Web Parts to support the Portal.

Suggested solution:

You need to coordinate with the design company to build prototypes to test all these issues before the design is approved by the customer.

Issue # 2 – Using Multiple Form Tags:

In HTML you can use more than one <form> tag to separate the submit actions, but once you start working with Asp.Net (and code behind) you know that you are only allowed to use one server-side form tag.

Suggested solution:

Replace the multiple <form> tags with <div> or <span>.

Issue # 3 – The usage of JQuery:

The design company used JQuery extensively in the design which sometime caused unexpected behavior. After digging around we found the following:

• Designers used the $ in there scripts.
• Some unexpected behavior occurred in the Portal as we proceeded with implementing some customization over it.

Suggested solution:

Ask the designers to replace all the $ char in the script with a full JQuery expression instead, and consider the use of $.noConflict().

Issue # 4 – The use of HTML ID’s in the script:

The designers were referencing the tags in the HTML using the IDs, for example:

<div ID=”TestDiv”>

The problem occurred when we implemented them as Layouts (using code behind) the ID’s value changes at runtime and caused a broken reference in the client side script as following:

<div ID=”TestDiv_001xyz”>

Suggested solution:

• Using .Net framework 4.0 and set the ClientIDMode to Static for each page.
• Or ask the designers to reference the tags using the Name & Type values.

Issue # 5 – Submitting Data:

The design company used to submit the data using an HTML Input control which caused the following:

• Losing the View State of the server side controls.
• Triggering custom Asp.Net Validators.

Suggested solution:

All submit actions must be done on the server side instead of the client side.

Issue # 6 – Use of JSON:

The design company assumed the use of JSON object to retrieve data directly from the server side, while we all know that this assumption might not be true always, so we had to integrate JSON objects with our Portal.

Suggested solution:

• Calling server-side objects from client-side script using web services and forcing it to return JSON object.
• Using one of the Ajax post methods and use a callback function on the successfully retrieve the JSON object.

Issue # 7 – Periodical UI Update Packages:

The design company used to send us UI updates weekly which were difficult to track and caused us to re-implement the UI every time they sent a new package.

Suggested Solution:

Wait till the design is approved and finalized with the customer then start your implementation.

 

Hope this will help…