Monthly Archives: November 2013

• About
• Latest Posts

Follow me

Hussain Fakhruddin

CEO at Teknowledge Software

Hussain Fakhruddin is the founder/CEO of Teknowledge mobile apps company. He heads a large team of app developers, and has overseen the creation of nearly 600 applications. Apart from app development, his interests include reading, traveling and online blogging.

Follow me

Latest posts by Hussain Fakhruddin (see all)

• How do mobile apps help small businesses? - October 10, 2019
• Top 15 Mobile App Ideas For 2020 - October 1, 2019
• Top 15 Software Development Trends To Watch Out For In 2020 - September 18, 2019

A design of high quality, a graphical representation of the app’s functionality, is something that distinguishes your software among competitors, and it’s something that will persuade them to use exactly your product. And if you are just at the beginning of your software project, the design stage will introduce to you such terms as wireframe, prototype, and mockup.

The terms “wireframe” and “prototype” and “mock-ups” are often used confused – possibly due to convenience or misunderstanding – but it’s important to know what sets these three terms apart and how you benefit from each because sometimes your project will only need a wireframe, sometimes it will require a prototype while at times you would just need a mock-up.

We can also mention sketch here, which is the easiest to distinguish, often handdrawn, reflecting the main ideas and giving an initial understanding of how the software is supposed to look.

WIREFRAME:

A wireframe is a low fidelity representation of a design. Its the least detailed representation of the three. Basically it’s the foundation stone of your design. It should clearly show:

– the main groups of content that will be there on each screen
– the structure of information
– a description and basic visualisation of the user – interface interaction (as how the user will navigate the application)

Wireframes are not just meaningless sets of grey boxes, though they may look exactly like that. We must consider them as the backbone of our design and remember that wireframes should contain a representation of every important piece of the final product.

Wireframes should be created quickly and almost the whole time should be spent communicating with team members and…thinking. Visualisation should be aesthetic, but this is vastly simplified. Depending on the needs of a project, a wireframe may evolve from simple gray boxes identifying page real estate to including basic graphics or actual text so that designers and developers can gain a better feel for how everything fits together. Having a wireframe of your future product is good for visualizing objectives for developers. A wireframe helps avoid misunderstandings between you and them.

When to use wireframes?
Wireframes are typically used as the documentation of the project. Since they are static and fix interaction with an interface at a specific point in time, they should be accompanied by the written word. However they might be also used in a less formal way. Since they are quick and simple in form, they serve well as clear sketches for inner communication in the team. If developers ask how something should be done – the answer can be provided as a rapidly created wireframe.

PROTOTYPE:

A prototype is a product that is designed and built to test a new design. The prototype is used to correct mistakes and make [the design] more user friendly. It is a fully functional working model of a final product. It should allow the user to:

–  experience content and interactions with the interface
–  test the main interactions in a way similar to the final product

It takes much more time to create a dynamic, clickable prototype than a static wireframe for obvious reasons. A prototype shows not only the content, but the general usability of an application. This simulation of interactions looks close to the final design, and can be user-tested to make sure that the software has high usability – that’s one of their biggest practical advantages. A prototype might not look exactly like the final product, but should be vastly similar. Interactions should be modelled with care and have a significant resemblance to the final experience. Interdependence between the interface and backend mechanisms is often omitted to reduce costs and speed up development cycles.

In the most basic sense, a low-fidelity prototype is often referred to as a “clickable” or “functional” wireframe. This is when one navigates between linked wireframe pages to understand how they are connected.

When to use a prototype?
Prototypes are used to their full potential in user testing. Such a simulation of the final interactions forms great material to check the usability of the interface, before the development actually begins.

But prototyping is rather an expensive and time-consuming form of design communication. It’s rather best creating prototypes that can be reused in development.

MOCK-UP

A mockup is very close to the real visualization of an application, with static representation of its functionality, it allows users to fully see and assess the design. Very often a mockup is a visual design draft, or even the actual visual design. A well created mockup:

–  represents the structure of information, visualizes the content and demonstrates the basic functionalities in a static way
–  encourages people to actually review the visual side of the project

Mockups are often confused with wireframes, due to the names of some software companies. Mock-ups are based on the wireframe that the client approved. They represent the way a real app looks and feels like, with all the colors, graphics, typography – that’s why they are easy to perceive and evaluate.

When to use a mock-up?
Mockups are particularly useful if you want to get early buy-in from a stakeholder. They are a good feedback-gatherer and, if placed in the context of the whole design story, can form a great chapter of documentation.

• About
• Latest Posts

Follow me

Hussain Fakhruddin

CEO at Teknowledge Software

Hussain Fakhruddin is the founder/CEO of Teknowledge mobile apps company. He heads a large team of app developers, and has overseen the creation of nearly 600 applications. Apart from app development, his interests include reading, traveling and online blogging.

Follow me

Latest posts by Hussain Fakhruddin (see all)

• How do mobile apps help small businesses? - October 10, 2019
• Top 15 Mobile App Ideas For 2020 - October 1, 2019
• Top 15 Software Development Trends To Watch Out For In 2020 - September 18, 2019

Interfaces exist to enable interaction between humans and our world. They can help clarify, illuminate, enable, show relationships, bring us together, pull us apart, manage our expectations, and give us access to services. Breathtaking and useful designs happen because the UI has been worked on tirelessly. It takes a real UI Master to understand how to make a terrific user experience. The best interfaces can inspire, evoke, mystify, and intensify our relationship with the world.

Here are 12 extremely useful principles to help you understand how to design your UI and Ux’s:

1. Know your user
Your user’s goals are your goals, so learn them. Restate them, repeat them. Then, learn about your user’s skills and experience, and what they need. Find out what interfaces they like and sit down and watch how they use them. Do not get carried away trying to keep up with the competition by mimicking trendy design styles or adding new features. By focusing on your user first, you will be able to create an interface that lets them achieve their goals.

2. Composition: The Look and Feel of an Application
The composition or layout of a UI not only influences its appeal, it also has a tremendous impact on the usability of the application in which the UI is used. Composition includes such factors as positioning of controls, consistency of elements, affordances, use of white space, and simplicity of design.

Positioning of Controls
In most interface designs, not all elements are of equal importance. Careful design is necessary to ensure that the more important elements are readily apparent to the user. Important or frequently accessed elements should be given a position of prominence while less important elements should be placed to less prominent locations. Buttons, such as OK or Next, should be placed in the lower right portion of the screen as the user normally won’t access these until they have finished working with the form. Grouping of elements and controls is also important. Information should be grouped logically according to function or relationship.

Consistency of Interface Elements
A consistent look and feel creates harmony in an application – everything seems to fit together. A lack of consistency in an interface can be confusing, and can make an application seem chaotic, disorganized, and cheap, possibly even causing the user to doubt the reliability of an application. Language, layout, and design are just a few interface elements that need consistency.

For visual consistency, you should establish a design strategy and style conventions before moving on to development. Design elements such as the types of controls, standards for size and grouping of controls, and font choices should be established in advance.

Also, try to use controls appropriately; while a text box control can be set to read-only and used to display text, a label control is usually more appropriate for that purpose. Remain consistent in the setting of properties for your controls – if you use a white back color for editable text in one place, don’t use grey in another unless there’s a good reason. Pick a style and stick with it throughout your application, even if it means redesigning some features.

Affordances: Form Follows Function
Affordances are visual clues to the function of an object. A user interface also makes use of affordances. For instances, the three-dimensional effects used on command buttons make them look like they are meant to be pushed. If you were to design a command button with a flat border, you would lose this affordance and it wouldn’t be clear to the user that it is a command button.

Use of white space
The use of white space in your user interface can help to emphasize elements and improve usability. White space doesn’t necessarily have to be white – it refers to the use of blank space between and around controls a form. Too many controls on a form can lead to a cluttered interface, making it difficult to find an individual field or control. Consistent spacing between controls and alignment of vertical and horizontal elements can make your design more usable as well.

Simplicity & Clarity
Perhaps the most important principle of interface design is that of simplicity & clarity. When it comes to applications, if the interface looks difficult, it probably is. A little forethought can help you to create an interface that looks (and is) simple to use. Also, from an aesthetic standpoint, a clean, simple design is always preferable.

To be effective using an interface you’ve designed, people must be able to recognize what it is, care about why they would use it, understand what the interface is helping them interact with, predict what will happen when they use it, and then successfully interact with it. Clarity inspires confidence and leads to further use.

3. Choosing a color
Color is an important visual element of most user interfaces. Beyond pure aesthetics, color has associated meanings and elicits emotional responses. To prevent confusion in meaning, color must be used consistently. To obtain the desired emotional responses, color must be used appropriately.

Effective use of color can make your program’s user interface (UI) more effective. Color can help users understand certain meanings at a glance. Color can also make your product appear more aesthetically pleasing and refined. Color can evoke strong emotions, and if you’re designing for international audiences, certain colors may have cultural significance. It’s usually best to stay conservative, using softer, more neutral colors.

Of course, your choice of colors may also be influenced by the intended audience and the tone or mood you are trying to convey. Bright reds, greens, and yellows may be appropriate for a children’s application, but would hardly evoke an impression of fiscal responsibility in a banking application. Small amounts of bright color can be used effectively to emphasize or draw attention to an important area. It’s best to stick to a standard 16-color palette if possible.

4. Use of Images and Icons
Icons and images are used more frequently than ever before to aid people in quickly finding and gathering information. Using icons and images forces you to organize and verbalize your information in a more structured, compact, and visual way. Icons and images are evolving and becoming the dominant way of conveying information.

It is also important to consider the cultural significance of images. Many programs use a picture of a rural-style mailbox with a flag to represent mail functions. This is primarily an American icon (although it is now found in rural areas elsewhere, including Australia); users in other countries or cultures probably won’t recognize it as a mailbox.

In designing your own icons and images, try to keep them simple. Complex pictures with a lot of colors don’t degrade well when displayed as a 16-by- 16 pixel toolbar icon, or when displayed at high screen resolutions

5. Fonts Selection
Fonts are also an important part of your user interface, because they often communicate important information to the user. You need to select fonts that will be easily readable at different resolutions and on different types of displays. It’s best to stick with simple sans serif or serif fonts where possible. Script and other decorative fonts generally look better in print than on screen, and can be difficult to read at smaller point sizes.

It should also be kept in mind that if the user’s system doesn’t include a specified font, the system will make a substitution, resulting in a completely different appearance than what you intended. If you’re designing for an international audience, you’ll need to investigate what fonts are available in the intended languages. Also, you’ll need to consider text expansion when designing for other languages – text strings can take up to 50% more space in some language. Again, design consistency is important in choosing fonts.

6. Conserve attention at all costs
Attention is precious. Don’t litter the side of your applications with distractible material. If someone is reading let them finish reading before showing that advertisement (if you must). Honor attention and not only will your readers be happier, your results will be better. We must conserve attention at all costs.

7. One primary action per screen
Every screen we design should support a single action of real value to the person using it. This makes it easier to learn, easier to use, and easier to add to or build on when necessary. Screens that support two or more primary actions become confusing quickly.

8. Provide a natural next step
Very few interactions are meant to be the last, so thoughtfully design a next step for each interaction a person has with your interface. Anticipate what the next interaction should be and design to support it well.

9. Provide feedback
Your interface should at all times speak to your user, when his/her actions are both right and wrong or misunderstood. Always inform your users of actions, changes in state and errors, or exceptions that occur. Visual cues or simple messaging can show the user whether his or her actions have led to the expected result.

10. Handling the error
No matter how clear your design is, people will make mistakes. Your UI should allow for and tolerate user error. Design ways for users to undo actions, and be forgiving with varied inputs. Also, if the user does cause an error, use your messaging as a teachable situation by showing what action was wrong, and ensure that she/he knows how to prevent the error from occurring again.

11. Help and Documentation
No matter how great your user interface, there will be times that a user needs assistance. The user assistance model for your application includes such things as online Help and printed documentation. Online Help is an important part of any application – it’s usually the first place a user will look when they have a question. Even a simple application should provide Help.

12. User Assistance Tools
The user assistance model for your application should also include:

Tool tips
Tool tips are a great way to display information to the user as they navigate the user interface. A Tool Tip is a small label that is displayed when the mouse pointer is held over a control for a set length of time, usually containing a description of the control’s function. Normally used in conjunction with toolbars, Tool Tips also work well in most any part of the interface.

What’s This Help
“What’s this” Help provides a link to a pop-up Help topic when the user selects What’s This Help and clicks the What’s This cursor on a control. What’s This Help can he initiated from a toolbar button, a menu item, or a button on the title bar of a dialog box.

Status Displays
A status display can also be used to provide user assistance in much the same way as a Tool Tip. Status displays are a good way to provide instructions or messages that may not fit easily into a Tool Tip.

• About
• Latest Posts

Follow me

Hussain Fakhruddin

CEO at Teknowledge Software

Hussain Fakhruddin is the founder/CEO of Teknowledge mobile apps company. He heads a large team of app developers, and has overseen the creation of nearly 600 applications. Apart from app development, his interests include reading, traveling and online blogging.

Follow me

Latest posts by Hussain Fakhruddin (see all)

• How do mobile apps help small businesses? - October 10, 2019
• Top 15 Mobile App Ideas For 2020 - October 1, 2019
• Top 15 Software Development Trends To Watch Out For In 2020 - September 18, 2019

“Some people walk in the rain, others just get wet.”
– Roger Miller’s quote came to be so very true for us recently when Teks enjoyed its annual offsite amidst torrential rainfall!

Yes! It was indeed a Rainy Day Picnic!!! Early that morning, black clouds gathered in the sky. Thunder rolled and a heavy downpour had set in. The rain did not seem to stop even for a while. But this could not dampen our spirits. We set out for the offsite with our umbrellas and rain coats on. We boarded the hired mini bus and started towards our offsite destination.

This year, the venue was Country Roads Resort. The resort was not too far and was located at Panchla – a picturesque countryside near Bauria. Spread over 45 acres of magnificent greens, the resort was a real treat to our eyes. And the torrential rain added an icing to it. A soft, pleasant breeze was blowing. All the trees and plants that had been just washed appeared very beautiful and pleasant. The beauty of the garden in the resort refreshed our minds and souls.A soft pleasant smell pervaded every place and the clouds had nearby cleared by then. Our hearts leapt up with joy to behold this beauty. We ran into the garden and started screaming and yelling. We felt as if we were back to those childhood days. We all had a cool photo session. Everyone posed at their best.

It was time for the outdoor games & activities. Quickly, we had our breakfast and gathered near the pool. There was a “Medley Relay & Treasure Hunt” race. The teams had to balance a lemon on a spoon, hop in a three-legged race, thread a needle and finally search for the clues to get the jackpot. All of us kept searching for clues all over the resort. It was such a fun! Finally, the “Spark Plugs” team bagged the jackpot!

Next, we had a volleyball match. As the field was wet and muddy, we decided to play volleyball in the pool itself.

Then we had our lunch. There was a plethora of delicious food. When the waiter poured the hot gulab jamuns in a bowl, a crowd literally gathered and gorging on the sweets!

After the lunch we had free time to enjoy the splendors of the park. Some played sports, while others lounged around in the shade.

Soon, it was time for the indoor activities and performances. We all were eagerly waiting for this. While a group enacted a hilarious comedy drama on “Modern Ramayana,” another group performed a Zombie dance! It was such great fun that everyone burst out laughing. There were solo performances too. Every  member of the Teks family either danced, sang, enacted a famous character or indulged in mimicry.

In the evening, we had hot pakoras with tea or coffee. What a perfect hi-tea in such a wonderful weather.We sat on the lawn beside the fountain and enjoyed our tea with the murmuring of the flowing water. Time to time, tiny jokes and a funny trivia game increased our enjoyment.

Hardly did we know, that a blast was waiting for us! All of us were asked to enter a room for a thanksgiving speech by our CEO. The room was all dark and nothing was visible. Suddenly, with a bang, loud music broke the silence accompanied by colorful laser lights and beams. It was then we realized, we were actually dragged into the disco! The hip setting, happening music added a zing to our spirits. Everyone let their hair down and enjoyed the good times, and how!

Time went by and we had no cares. Finally, it was time to return back home. What an offsite it was! It was one of the most memorable day in everybody’s life. Apart from being an exciting and fun filled day, it would hold some of the greatest memories of being together………………………