wireframe website, wirframe, wireframes

How to manage a successful UI design project

Working in the UX and design field both at agencies and for clients, I have learnt some lessons that I try to stick to in each of my projects. The most important lesson has to be that design is a collaborative process. This is absolutely true and while there are times when I like to lock myself away to work on a UI design, this is best left until the final details. At the beginning of a UI design project, I work on interviewing potential users, working with stakeholders and collecting as much feedback as possible about what problem I am trying to solve.

The next piece of advice that relates to this is to create work processes that allow for you to incorporate feedback quickly. Read up on lean design principles and you will find that mockups are often the most flexible mediums that you can work with on a UI design project, for the main reason that everyone can contribute and provide feedback easily. Mockups can also be edited much faster than other forms of UI design.

The third piece of advice I would give is to create a detailed specification document with all the information about the UI design that your team members and your clients may need. Your clients will feel more confident having a document they can rely on and the rest of your team will have a clear guide for how the UI design should be. Ensure that you consult with developers, designers and UX experts when making the specification document. Often at this stage, many problems are addressed, which saves time during implementation.

Posted in Ui Design, Wireframe Software | Tagged , , , , , | Leave a comment

The Secrets of using UI Design Software

Creating the perfect user interface is something that all designers strive to do. Each has a different method of how to achieve this and each uses a different type of UI design software to get there. There are some secrets that designers always stick to when they create interfaces:

1.    Keep things simple

Simple experiences are often intuitive experiences. You may want to use a wireframe tool, or Photoshop as your UI design tool, but it is best not to be tempted to include clutter in the interface. In design, less is always more.

2.    Have a vision

In your mind, you should be able to imagine a user going through your app, or how you would like your product to look. Write down some concrete words, so that you can stick to this vision throughout. For example, “My app will be easy to use”, or “My app will delight users”.

3.    Iterate

Sketch out concepts in the beginning of your design process and then build these up later with UI design software. Don’t be afraid to test your designs with end users, even if they are still wireframes. Often this feedback will be far more valuable than feedback you may receive later on.

4.    Collaborate

Often others will help you to become more creative. Even stakeholders who are not designers may provide insight into how your users work. They will also be able to tell you if their business requirements do not meet with your design concepts. There are many UI design tools that can be used collaboratively, which also have different review options.

Remember, you don’t have to feel confined to the features of your UI design software. Sometimes a pen and paper can work well to draft out concepts. The most important thing is to use a UI design tool that you feel comfortable with and that produces an end product you think will be successful.

Posted in Ui Design, Wireframes | Tagged , , , , , , , | Leave a comment

What Fidelity should Mockups be?

Mockups are used by UX designers to help visualize their ideas to other team members and to get feedback from end users. Because mockups can be used by special software which requires no programming, they are often quick to make. There is some dispute about what the right fidelity, or level of detail, a mockup should be. One the one hand there are those who think they can get the best feedback from stakeholders from a mockup that looks and feels exactly like a final application. On the other hand, some designers believe that by having feedback early on for sketches they make, they can save time.

As with many design workflows, there is no right level of detail to choose. You need to think about your team and the stakeholders you work with. Would they benefit from seeing how the final application might look? Do you think they would be more likely to critique your work if they were fully aware that you were working on a mockup that could be changed easily? In that case, a low-fidelity mockup in a sketched look may be best. You can also choose how detailed you want the interactions in your mockup to be. I have seen many examples of UX designers using paper in a way to create interactions by folding the paper in certain ways. This is a unique approach, which will show to end users that your design is really a sketch. For many projects, however I use a high-fidelity prototyping tool that enables me to simulate interactions on a mobile or tablet device. This produces a reliable form of feedback and enables me to try out my design on a range of different-sized devices.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , | Leave a comment

Brining Online Wireframes Offline

I often create online wireframes to demonstrate to stakeholders. I often find that this is a great way to get feedback and work collaboratively with others who are not in the same location as me. There are however some occasions where I am fortunate enough to work face-to-face with a client and can work on wireframes with a different approach. Although I still use an online wireframe tool in this case, I find it can be helpful to export my wireframes to print out. I do this particularly in the beginning stages where I have planned the layouts of my main navigation and most important pages. By having the wireframes on paper, my client can make notes and draw what he would like to change onto the page. When he has got used to the idea of giving feedback on my wireframes and understands the purpose, we can then begin to collaborate online in real time.

There are ways to be creative offline with wireframes. This includes folding paper in unique ways and creating different interactions in this way. Some people feel this can help them to be more creative, as they are not limited to the interactions that any one tool may offer. With online wireframes, there is of course the benefit that a person can simulate the prototype on the computer or, in some cases, mobile device. This is especially useful when it comes to gathering user feedback, as they already have a context when they hold a device in their hand. Whether you prefer online wireframes or paper wireframes, as long as you are clear about what you want to achieve through them and what type of feedback you should get from them, they can prove to be an invaluable resource in any project.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Interface Prototyping: Speed isn’t everything

The internet is probably not known for its emotional side. It’s all about accelerating user interactions. In the world of user interface design this means that every developer tries to create a satisfyingly flawless user interface. With this aim in mind, designers often carry out interface prototyping. Interface prototyping – designing mockups, wireframes or more detailed prototypes of the final product specified – reduces the risk of realizing after the product is finished, that elements could (should) be improved. In my opinion lots of UI designers and UX experts and other people involved in the design process have been told very often that they don’t have time and that everything is about speeding up user interactions. They might forget that for some users the emotional appeal of a visual design can be important.

You might think, beautiful, of course interface prototyping is about conceptualizing a beautiful UI design (with beautiful I don’t mean good-looking, but well-performing and satisfying). It’s not about the look. When carrying out interface prototyping you shouldn’t think about the font type or coloring of the background, but: It’s good to include elements, people are attracted to. Even if you want them to buy fast (interface prototyping is often about reducing clicks during the buying process or avoiding steps that make people interrupt their purchase), it’s also good when your customers spend a lot of time on your website. Show them beautiful pictures or tell them an unexpected story. For your prototypes this means – don’t generate all the content you might use in the end, just test a few elements. With interface prototyping software you can upload images or apply text boxes. Just try out with test users how they like it. The World Wide Web is a rather stressful place, precisely therefore it’s time to design relaxing interfaces – this won’t make your customers buying less.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Content strategy in wireframes

Content is very important when creating wireframes. One benefit is that it can give your wireframes a ‘more realistic’ touch, which can be particularly useful for getting user feedback. Content strategy has to be planned and adapted to your project’s requirements. In a very early stage of conceptualization ‘lorem ipsum’ content is probably enough for your low-fidelity wireframes. This type of wireframe is not about testing the full user experience, but rather about the functionality of your planned website or application. Step by step you make your wireframe more detailed, which means that relevant content is needed. Try to avoid including fictional elements in your wireframes, such as celebrity or comic character names. It may sound odd, but it can easily distract the test user from the task in hand. Instead of thinking about a login process, you don’t want your test user to be thinking about the latest film by Tom Cruise.

The more detailed your project gets, the more precise you can be with your content. Detailed content (like product descriptions) can be useful. For example: Coat XY is available in green and red, its soft inner lining keeps you warm in winter. This means a lot of work, so before conceiving content think about how detailed you need your prototype to be. Wireframes are always about functionality and the design like the font type or colors shouldn’t be a main point in your concept. However in my experience, sometimes carrying out usability testing with more detailed wireframes regarding the content is helpful. The test user interacts with the prototype in a more natural and intuitive way while testing. This increases the correctness of your collected data.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

The New UI Design Trend: Tablet and Smartphone at the same time?

A few years ago, the goal of mobile phone providers was to make devices as small as possible. I remember minute screens with a very simple UI design. As the functionality was limited (compared to smartphones nowadays), it was simply not necessary to create a complex UI design. With the rise of large touchscreen devices, this has changed. Phone manufacturers are trying to keep phones portable, but with a screen as big as possible.

A lot of people own both a mobile phone and a tablet. They use their phone for communication and organization, and their tablet to work with or watch a movie for example. There are already devices which combine both functionality aspects, like the Samsung Galaxy Note. My guess is that it will be the new trend to combine the tablet and smartphone in one. Why have two devices when you only need one? People are more likely to accept a bigger phone than a few years ago. For developers this means finding a good user interface size to suit different needs. The UI design gets even more complex as it has to be functional both when its user is walking around and when he is back at the office. For us UX designer this means being even more attentive about different user scenarios. The UI design of an application which is used when the user is doing something different at the same time (e.g. while using a map app the user is likely to walk) alters from a UI design of an application which is used with full attention. However, if the functionality of a tablet is combined with a mobile’s one, the borders of scope become indistinct. In my opinion we have to think even more creatively and freely about future UI designs.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

Is Apple in Need of a New UI Design?

The news about Apple reducing its orders about 50% for the latest iPhone model was a bit surprising to me. I have an idea why Apple has had problems maintaining the popularity of the iPhone over the last year. The media reported that the iPhone 5 is too expensive and has often advised consumers to stick with comparable devices of Samsung, Sony or HTC Desire. Some believe Apple should develop an affordable smartphone to target a wider range of customers. Anyway, another idea came to my mind why the iPhone isn’t as successful as it was.  Could it be that its UX design principles are outdated now?

Apple is popular for its easy and intuitive UI design. To navigate the iPhone, you rarely need directions, it’s learning by doing. I think the UI design is especially known for its information architecture. This type of arrangement system is called ‘hub & spoke’. The different functions are divided in separated spokes. To navigate between several applications the user has always to return to the device’s home screen (so this UI design pattern is not the best when multi-tasking is needed). So far so good.  Did Apple miss out on rethinking their User Interface Design?  I have been an iPhone user for almost three years now and as much I love its UI design, I have to admit – nothing changed over the last years. Of course, the Google Map app was removed and the company’s own map app was added, but in terms of look and navigation nothing changed in the UI design. In the market of smartphone and tablet devices trends change quickly. The customer should be animated to always want the latest model. In reaching this goal exciting new things should be offered. So, Apple! What about rethinking your UI design?

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

Interface Design Tips: Finding a Balance

When you are working on a new user interface design, there are different things to consider. This ranges from user acceptance to business requirements. Many designers begin with UI prototyping before they code their website or app design, because requirements can often change at the beginning of a project. With prototypes of a website or software application (with a prototyping tool for example) you can work over your ideas several times, find out what potential customer think about your concept and enable good communication between different stakeholders. While every design project is different, my main tip is that you focus on your user at the beginning of a design project.
How to Create a Satisfying User Interface Design?
A user interface is the point of interaction between a computer and a human being. That means the person who wants to navigate through the interface needs to understand how it works. It’s important, therefore, that the interface design is well-structured and clearly set out. There must however be a balance. Sometimes there needs to be a challenge element to any interface design to keep the user’s attention. Remember to stick to conventions of other websites in your interface designs, particularly when it comes to navigation and structure. For other things, there can be opportunities where you add a game element or a challenge to keep your user interested. This is also a consideration if your website is one that users will return to again. Ultimately simplicity will always be the safer option, but if you think your target audience will benefit from it, look at ways of adding complexity to your UI design to help your user engage with the content on your website.
Posted in Interface Design Software, Interface Design Tool, Interface Prototyping | Tagged , , | Comments Off

Testing Wireframes

When creating a mobile application, it is advisable to create wireframes in the initial stages.  These are blueprints of the basic layout of the UI design. Not only can this be a useful way to work over your ideas with colleagues, it can also help you create a better user experience. Even wireframes with little detail can be used for testing with end users.

The first idea for the layout of a website could be sketched out on a paper napkin. Sometimes this is all you need to show your idea to stakeholders. This is also a useful method to try out new ideas. Static wireframes are schematic illustrations of single screens and can be used in planning information architecture. Once these have been finalized, the second step is to transform these static wireframes into dynamic wireframes. Some prototyping tools allow designers to add page-linking and other functionalities to their wireframes, so that these can be tested on end-users. These wireframes are also not about the design but function of the application.

Usability tests with potential users will show whether users respond to your application as you expected or not. While some product managers may doubt the ROI of user-testing, it’s a crucial step that could save hours of redesign and programming at a later date. Choosing participants for a usability test however is important. Often it’s easy to ask friends and family, however these might not necessarily be people in your target audience. Even if they are, they might be reluctant to give you honest or critical feedback for fear of offending you. You should include test users of different age, nationality, cultural background and technology knowledge, if your application will be used by a diverse range of people.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Tool, Online Wireframe Tool, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment