wireframe website, wirframe, wireframes

5 UX trends to incorporate into your prototyping

Posted on June 19, 2013 by admin

I often use prototyping software in my work as a UX designer, but just using prototyping software does not ensure that you will be creating software that keeps up with the latest design trends. There are five key trends this year that I always try to incorporate into my prototypes if possible.

Mobile First – This isn’t just a buzz word, it’s a way of designing and should always fit into your work flow. Especially when I work on prototypes, I always design for smartphones, move onto tablets and then focus on a desktop app. I find this is the best way for me to give the user the simplest and most intuitive user experience.

Gamification – LinkedIn are masters at this trend, but also tutorial websites have brought this method in successfully. Rewarding your user for engagement, either with a discount for a product or with special recognition is often a great way to get users addicted to your application.

Lean UX – It took the startup world by storm and now lean methodologies are also fitting into UX communities. When you use your prototyping software, remember to get as much feedback as possible early on. This will help you adapt and iterate based on user feedback.

Omni channel UX – Being consistent over many different channels is a difficult task for a UX designer, but it is also important for a great user experience. I use prototyping software that allows me to upload images and create custom templates.

Google Glass – I truly believe Google Glass is a sign of where UX is headed. What could be more complex than designing for a product that won’t be controlled by a user’s hands? This goes against everything we have learnt so far in human computer interaction. Nonetheless, you can still use your prototyping software to upload images of locations and overlay these with text and boxes, so that you can already get into the mindset of Google Glass users.

Posted in Prototyping Software, Prototyping Tool | Tagged , | Leave a comment

5 Ways to Create Emotive Experiences with Wireframing Software

Posted on June 8, 2013 by admin

Emotion may not be something you focus on when you wireframe a new mobile application or website, but it is often a crucial part of design. Users rarely make decisions detached from emotion. Even when employees make purchasing decisions for their company, they may try to make decisions rationally, but it is possible to persuade through emotion. When using wireframing software to create the concept of your application, follow these five tips:

1.    Plan the emotional journey

I often use wireframing software to create thumbnails of pages and to draft user flows. When you do this, also think about the emotion the user should go through when they are on each of these pages. If the user has just arrived on the homepage of a charity website, they should feel empathy with the people featured in any photographs. If a user has just carried out a purchase, however they should be satisfied, happy and look forward to the arrival of their product.

2.    Interview your users

Focus groups and user interviews can be valuable processes for discovering what it is that drives your users. You may want to use your wireframing software during the process to see how your users respond to the different mockups that you create.

3.    Experiment with color

Color is one of the things that can set a brand apart from others. It also can have a huge effect on emotion. Upload images and color samples into your wireframing software and feel free to create pages of mood boards. This will help you to be able to match the emotion you want to create with a graphical image.

4.    Reward your users

If you want your users to repeat an action, or return to your site, you should reward them. In your wireframing software, experiment with concepts of gamification. Firstly, pinpoint the places where users should be rewarded and then experiment with how this should be done. If it is a social site, users can earn points, or unlock special features.

5.    Surprise your users

Nothing sparks emotion better than surprise. Surprise is something that will delight your users and ignite their curiosity to return to your site.

While you may think that wireframing software is primarily for sketching out layouts and organizing information, creating wireframes can be a great way to explore the emotional journey of your users.

Posted in Wireframe Software, Wireframing Software | Tagged , , , , , , , | Leave a comment

5 Tips for Organizing Content with Wireframe Tools

Posted on June 3, 2013 by admin

Website content is a painpoint for many designers and it can often result in bottlenecks in the design process. Sometimes it is vital to understand what type of content will be needed in a website, while at other times it is advisable to include only dummy content with your wireframe tool to give clients an overview of how an application should look.

1.    Use as much real content as possible

Chances are that your copywriters are already working on written content for your website. As for this copy, or get them to upload the content to the wireframe tool that you use. This will help with user testing and also with understanding the hierarchy of information. Many users have difficulty understanding the standard Lorem Ipsum text, so it can be less distracting to include past or new text for the website.

2.    Understand link building

SEO teams are also familiar with wireframe tools and link structures of a website. While it may not be necessary to plan every page of your website, you will need to understand how these teams work and what parts of each page should be interlinked. Remember that SEO plays an important role in how your users find your website.

3.    Create site maps

There are some wireframe tools that automatically generate site maps and user flows. Make use of these features, so that you have an overview of the link structure of your website, and so that you can be confident that your pages are linked in a logical order.

4.    Use media

Remember, content is not just about text. Video and other forms of media often play and important role in user engagement. Include these interactive features as much as possible in your wireframes. Although you may think it is not necessary early on in the design process, there are many wireframe tools that include the option to add these forms of media and they can help your clients and users to get a better understanding of how the final application should look and behave.

5.    Consider user-generated content

If you want high user-engagement on your website, you will want areas where your users can upload images and write text. Plan how this should look and create page states with your wireframe tool. Remember, it’s just as important to plan how a page will look before users have uploaded content as after.

These are just a few areas you should consider when creating wireframes. Content can be something that makes a difference in user testing and with convincing clients. Often it is better to have wireframes with real content, even if the visual design is not pixel perfect. Wherever possible substitute dummy text and videos for real content to make the best impression.

Posted in Wireframe Tool, Wireframes, Wireframing Software | Tagged , , | Leave a comment

Prototyping Software for Content Choreography

Posted on May 14, 2013 by admin

Content choreography is a term that is used to describe the process in responsive design when UI elements move around the page when a browser is resized for example. This is a relatively new field and some designers are using prototyping software to map out how their content should be structured in different browser sizes. One of the benefits of using prototyping software is that without the need for programming, designers can quickly experiment with different layouts and simulate these directly in the browser. Some types of prototyping software also allow for basic interaction and page linking to be included, which means that user experience experts can carry out user testing on potential end users.

When using prototyping software to map out responsive design, it is often a good idea to create a basic mockup of how you imagine your application to be and then to refer to other designers or developers to see how this should best be implemented. This is a good way to ensure that you stay open to new ideas and can quickly generate a few alternatives to see which would be best to implement for your team and end users. It is often best to focus on the content for mobile before designing the web structure with prototyping software, as this will help you focus on the most important information first.  If you already have a website and want to adapt it for mobile, think about how your information should be structured. Often UI elements will be the same size on a mobile device and therefore the best way to create a hierarchy is through the order that they are presented on the page.

Posted in Prototyping Software, Prototyping Tool | Tagged , | Leave a comment

Is there a right way to use option fields in your mockups?

Posted on May 7, 2013 by admin

Mockups of mobile apps are increasingly popular and are seen as a useful way to test and validate designs with end users and stakeholders. I recently read an article on the correct way to include select menus in websites and this is a concept that also works well when UX designers come up with mobile mockups. Remember that with mobile apps your users will often be out and about and may not have much patience to scroll through various forms. If you are ever creating a form to be used on a mobile device, try to keep this to a minimum, or spread this over several screens to make it more manageable for your users. Also be careful with using dropdown menus and radio buttons, as if there is not enough spacing between the categories, it can be difficult for users to ensure that they will not select the wrong category.

When I create mockups, I try to use the preset iOS and Android UI elements that are available in the tool I use. That way I am limited to conventional mobile UI elements that are well adapted for mobile use. If you are creating a website which is to be adapted for both mobile and desktop browsers, it is always advisable to create a mockups for your mobile website first and then expand on the content and interactions for the desktop website. This is because you will then be focusing on the most important elements of your website. It also means that when you create forms, you will not fall into the trap of sticking to normal web conventions. In general if you use a dropdown menu that includes 25 items, it is better to switch this for a text input field instead. You can find more useful guidelines at: http://uxmovement.com/forms/stop-misusing-select-menus/

Posted in Wireframe Software, Wireframing Software | Tagged , , , , , , , , , , , , | Leave a comment

From Wireframes to Website

Posted on April 20, 2013 by admin

I often meet with founders of new companies who ask me about my wireframing software and claim it will be useful in the conception of their new app or website. Some people I have met give me the impression they will simply create the wireframes, send them off to a developer and the website will be produced. If only it were that easy. Firstly creating wireframes requires a lot of research, thought and careful planning. For entrepreneurs, wireframes can be an incredibly useful tool in validating your ideas and convincing investors. Instead of creating wireframes and seeing these as a final version of how a website or app should be, it is far more productive to work with UX experts, graphic designers and developers during this process. Even if you have the business ideas and are confident in your own design skills, wireframes should always be seen as a compromise between the needs of the user, the needs of the business and the ease with which a design can be implemented.

What happens once you and your team are happy with your wireframes? I would say test, test and test again. Once you have had as much feedback as possible and are really honest with yourself about whether the current design would work, then move on to the next step. This involves working with a graphic designer who will often use InDesign or a similar tool to create pixel-perfect designs based on your wireframes. Depending on the complexity of your website, you may have several developers working on your project. Speak to your developer about hosting options. If you do not have your own server, consider hosting your website through a third party. HTML, CSS and JavaScript are standard for websites, but if you are implementing a mobile app, consider whether you want to create an HTML5 app or a native iOS app. Finally, don’t forget to ensure that your website is sufficiently optimized for SEO. For this, an SEO copywriter can help you for a fee. This will help ensure that your site will be found by potential visitors on Google.

Posted in Wireframe Software, Wireframe Tool, Wireframes | Tagged , , | Comments Off

Prototyping Software: How it’s used for e-commerce sites

Posted on April 6, 2013 by admin

At trade fairs e-commerce often has its own section. In fact there are trade fairs just for this field. Not only is it an area where lots of money can be made, but creating an ecommerce site in itself is a complex process. It is a challenge to fit many different categories into the navigation of the site, both for front-end designers and for developers. Many of the professionals that I know who update or design ecommerce sites use prototyping software. This is often because the structure of an ecommerce site is one of the most important things to get right. Prototyping software can be used not only to plan the content of the individual pages of an ecommerce site, but also to plan how pages should be interlinked. There are some types of prototyping software that enable users to create a sitemap or user flows, which shows how the user should visit the site. The navigation of a site is one of the most complex things to get right and it is especially important that this is finalized as early on as possible in development. One of the benefits of prototyping software therefore is that no programming is required and prototypes can be generated quickly.

The success of an ecommerce site also relies heavily on marketing teams who can both analyze and optimize a website. Being able to measure how many people visit pages of the website and what sources they arrive at is crucial. It is also paramount that teams can measure which target audience purchases certain items.  Many marketing teams use prototyping software, so that even non-technical stakeholders can give input into the design. Social media, Adwords, landing pages and user tracking are all important considerations. This is why it is often a good idea to use prototyping software that you can make comments in. Ultimately prototyping software should be used to plan and structure content and to explore some of the more complex technical aspects of building an ecommerce site before programming begins.

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

GUI Prototyping: UI Design Patterns and Innovative Elements in Balance

Posted on March 18, 2013 by admin

GUI prototyping carried out with wireframing software involves using predefined UI elements in your mockups. Most prototyping tools include an element library with items like an accordion or a radio button. It makes this type of GUI prototyping fast and easy. You can simply drag and drop UI elements into the screen. The interface design of most websites has a common structure to which the average user is used to (e.g. an ‘about us’ link in the footer). Still it is worth it not only to repeat the same information structure and functionality over and over again, but to experiment with new UI patterns as well.

This is where GUI prototyping can be especially helpful. A mixture between patterns and newly designed elements helps you to create an interface design. On the one hand, you can create a user-friendly application that your customers will understand and be able to navigate through. On the other hand, you can create attractive and innovative designs that will set you apart you’re your competitors. Market analysis is important to be sure to keep pace with competitors. To name one example: Apple used a carousel in its UI design, it was fresh and cool. Other companies wanted to be up to date too. Still it isn’t a good idea to just copy the design pattern. User will see the similarities and this is not the best publicity. The best option is to look how this fits in with your needs and improve on it. To find out what problems a UI design includes, GUI prototyping is advisable. With GUI prototyping you visualize your ideas and come clear about the information architecture of your interface design. GUI prototyping includes also the advantage to be able to do usability testing before coding. This saves time and money in case you have to change something. UI design is tricky, a carousel for example is cool and appealing, but only in some cases, because the user has to click through all content to reach one specific he is looking for. For this reason to organize a lot of content with a carousel isn’t advisable. A good balance between UI design patterns and innovative elements you’ll find out with GUI prototyping.

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

Prototyping Tool Customer Support

Posted on February 18, 2013 by admin

We have recently started to use a new prototyping tool in my company which has been a big transition for us. Previously, we worked with a desktop-based prototyping tool. Now that we work on the same project with another agency (we are specialized on application development, they are experts in content management and strategy). We were in need of a web-based prototyping tool, so that we could work collaboratively online. This is much better than email, as now we can understand what the others are working on.

With a new prototyping tool you need learning to navigate through the software. Even if your prototyping tool is really user-friendly and you easily understand how to work with, you might have some questions. I wanted to know how to design error message boxes. And before trying it myself and being stressed out, I contacted the customer support of the prototyping tool. I just send them a short message. They were friendly and told me how to design error boxes in wireframes (you basically design two identically pages and put on one of them the error box on top of it). The employee also offered me a free online demonstration of the prototyping tool. I agreed and I have to say I know my prototyping tool better than before. I now know what features it includes and which not. This saves time and nerves. You’ll see that the time you invest in the learning process will be saved while working on the prototypes.

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, user interface design | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

Thinking of Personas during GUI Prototyping

Posted on February 7, 2013 by admin

GUI prototyping doesn’t only mean designing a concept of a product with a focus on its functionality. GUI prototyping is more a combination of different creative processes. Starting with an initial mockup (like a paper sketch), the wireframes become more detailed (e.g. when prototyping software is used). Finally, you may design an interactive high-fidelity prototype which comes close to the end product. Nonetheless the process of GUI prototyping involves more aspects. Mostly it isn’t only one person working on a project, so different opinions and new ideas will change the concept. Then it is important to carry out usability testing at an early stage. You can simply show your paper prototypes to your colleague or run remote usability sessions as some prototyping tools offer this option. GUI prototyping is not only about designing a prototype, but also about reflecting on the potential user.

Think Outside the Box

During GUI prototyping the potential user should always be kept in mind. It isn’t enough to think of something undefined like “The user often needs the application while sitting on his desk.” Being more specific is advisable. “What is the average age of the user?” “When and where is he using what and what does he expect?” Often applications have different types of users. User A perhaps uses a public transport app at home, planning his trip. User B might try to find out how to get to a certain place while walking down the stairs. GUI prototyping is above all about to think through the whole product. With a satisfying concept, a satisfying result will be created.

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, user interface design | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment