wireframe website, wirframe, wireframes

Wireframes for higher security

Posted on May 14, 2012 by admin

There has been a lot of discussion about security on the internet lately and with recent hacker strikes the topic has reached even higher priority. Personal information has become widespread on the internet with social networks, such as Facebook and Twitter, and this increases the risk of identity theft and other risks. These risks are heightened with users on mobile phones. Security is one of the things people consider when signing up to a social network and creators of these websites must take this into consideration.

Social network wireframe

If you are thinking about setting up your own social network, I would suggest making a wireframe (or mockup) of the designs of your pages. In your wireframes, be sure to highlight how your user’s security will be safeguarded. One of the benefits of using an online wireframe tool is that you can reuse some content. For example, if you want to create an example of a profile, you can create several pages to show how this will appear with different security levels. For example, you could create a wireframe representing how your user’s profile will look in a public view. This is usually the state that shows the least personal information. You could also draft a page design with your wireframe tool indicating what the “private” or “secure” view of your user’s profile would look like. The wireframe could be a high or low fidelity wireframe depending upon how much visual detail you want to include. You can also consider using clickable wireframe software to prototype your wireframes.

What are wireframes?

In case you are not sure what a wireframe is, here is a short definition: A wireframe is (usually) a low-fidelity visualization of a user interface. This is concerned with the foundational elements (such as where things will go but is not necessarily concerned with how they will look (e.g. not so many pictures). A wireframe is usually static but there are now clickable wireframes that are able to be simulated. Wireframing software (or UI design software) usually allows you to make your wireframes clickable (i.e. interactive).

Is the future secure?

As you make considerations about starting your own social network, do also take into consideration the “playing field” among the many social networks. You will have to find your own niche within the social networking community and convey to the audience what your social network can offer. Increased security may very well be a deciding factor for many individuals.

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, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool, user interface design tool, user interface design tools, user interface designs | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

Prototyping Tools and Larger Tablets

Posted on May 7, 2012 by admin

The tablet market is growing and so is the size of Toshiba’s tablets. The firm has confirmed the release of a new 13-inch tablet, which has drawn some media attention. If other companies follow, the distinction between the tablet, the laptop and the desktop computer will be difficult to make. Stakeholders must ask what the function of this device is. This tablet is said to be targeted at those who want to use their tablet in the home. The tablet also comes with a stand, so that users do not have to carry it. For designers of apps for tablets, this could be an interesting device to design around. Designing for this type of device requires innovation and imagination, as designers have to think about new possible uses for this device. Furthermore, designers may have to consider formatting issues and compatibility of apps with the display.

Some designers already use prototyping tools to sketch interfaces for software applications. This can be a fast and cost-effective way of seeing which design concepts would work best before programming begins. Prototyping tools may be especially cost-effective in prototyping apps for larger tablets, as this is a new trend and it may not be clear for some designers what concepts may work best for this hardware device. One of the benefits of using prototyping tools is that there are some available on the market that enable users to simulate their prototypes on the hardware device itself. In this case, if a designer has created a photo-sharing app and wants to see how it will look on a larger tablet, they can simulate it on the new tablet to see what changes can be made to optimize the design. The designer might discover that usability flaws may arise, or that the prototype, which works well on the iPad does not fit well on the larger tablet device. At any rate, prototyping tools can help designers draft innovative designs quickly, which will help them take advantage of the larger canvas available to them with these new devices.

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

UI Prototyping in the Development of New Game Controllers

Posted on April 26, 2012 by admin

I noticed from a quick search online that video games are still in high demand and their designers are ever willing to implement more UI prototyping to prototype more tactile or interactive environments for these games. It’s not quite virtual reality, but a new video game controller, developed by the University of Utah, does provide for an interactive and unique video gaming experience.

UI prototyping and User Experience

This new video game controller, developed in 2012 by the University of Utah, actually encourages the user to push their thumbs in different ways according to what occurs in the game. The controller tries to replicate the feeling of gunshots, or waves (such as in fishing) or even explosions in an attempt to improve gaming experience. This design was intended as an improvement to the “vibration” function within current video game controllers. In addition to the interesting functions, the fact that the designers used UI prototyping was positive, since they could make an initial design and then modify it based on feedback.

What is UI prototyping?

UI prototyping refers to drafting the user interface of a hardware device, or software application. Our case deals with the external controls of a game. The University of Utah implemented UI prototyping for the controller by making a usable “draft” of the device (this is a prototype). Then with a working prototype, they could test the controller and make modifications as needed.

New Challenges

I am excited to see how this controller will turn out and what the reaction to its UI design will be. It will definitely be a different experience for the user to have resistance against his thumbs while playing and perhaps add a little bit of a challenge. Designing user interfaces isn’t easy, but hats off to those who brave it to design new video games and controllers for us all.

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

Using texture to optimize user interface designs

Posted on April 13, 2012 by admin

Using a variety of textures in a user interface design has become a recent trend in web design. This trend is useful, as it can not only help an application look more attractive, but it can also improve usability. Adding different textures to a user interface design can make the interface look more interesting and attractive to end users and can help designers highlight calls-to-action buttons and other navigation elements. Texture can also be a very easy and quick way to create effective UI designs and add depth to your interface.

Using texture to guide the user through the UI design

Texture can refer to a kind of design pattern, and can be backgrounds, that may resemble marble or wallpaper “texture” as opposed to simply solid colors. Texture can draw the user’s eye to the part of the UI design that is beneficial for users to see. This may be a buying button, or important information. Where there is a contrast between a smooth background image and the texture of buttons, texture can draw the user’s eye to parts of the user interface they might not otherwise have noticed before. Texture can be a subtle and effective way to differentiate between varieties of content. This also works best when color and other visual elements are used to give structure to a site.

What to consider when using texture

When you use textures, think about your target audience and the overall theme you are trying to convey. Always consider how the textures you use on your user interface designs can enhance the usability of your application. If it can be detrimental and can make writing or images illegible, try toning down the texture. There are different ways you can do this and Photoshop can be a useful tool in this respect. Think about where the main focus should be on the user interface. Is it best for this area to have texture, or should it be smooth? Experiment with color combinations and get feedback from potential end users if possible. Once you have experimented with texture in a few projects, you will have a better idea of what works in a user interface design.

Posted in Ui Design, user interface design tool, user interface design tools, user interface designers, user interface designs | Tagged , , , , , , , | Leave a comment

User Interface Design and Template Libraries

Posted on April 4, 2012 by admin

User interface designs are becoming less creative in today’s websites. The reason for this is the emergence of a great number of user interface design pattern libraries, which can be downloaded and reused for various interfaces. To create a relatively simple website it is possible to find basic templates on the internet for free. Whether the use of templates and the standardization of user interface design elements are a good development or not can be debated.

Templates and patterns are used widely, not only for graphical, but also for interactive UI design elements.  It is not uncommon to create libraries of user interface design elements such as date pickers, dialogue boxes and buttons. For many designers, especially, in smaller projects, these libraries can come in handy and help save valuable time. Template libraries can serve as points of reference for those who are trying to find a suitable solution for their user interface design.

Some designers find it useful to create their own user interface design libraries. Clearly, it takes time to create every element. By creating a template library, a designer may reuse user interface design elements across projects. Creating templates can not only help avoid repetitive work but also keep complex interfaces consistent, which can be vital for bigger projects.

Whether user interface design libraries have a positive effect on user experience is not entirely clear. The advocates of templates emphasize the time-effort advantage. There is a chance, however, that publicly accessible user interface design libraries might spread the designs that are not successful or user-friendly. To conclude, when resorting to public user interface design patterns it is important to use common sense and when creating your own – to ask yourself if it is worthwhile.

Posted in user interface design tool, user interface design tools, user interface designers, user interface designs | Tagged , , , | Leave a comment

Wireframes and University emergency messages

Posted on March 29, 2012 by admin

Wireframes can be used for good – and not just for good UI designs. Since a number of tragedies on campuses occurred across the United States – law enforcement and university security have implemented website warnings in an effort to reach more students and public before danger occurs. But how can the impact of such warning messages be maximized? The answer lies in the way in which websites are designed – and website wireframes are a powerful tool to help with website design. I will discuss this option to help point out some dos and don’ts.

Wireframe Dos

Do make the emergency messages obvious. Wireframes are used to draft the layout of a website. As the layout strongly influences which parts of the site receive most attention, wireframes can help optimize security messages for maximum visibility. This should be highlighted already when wireframes are created for a university website. One way to achieve attention is by adding a pop-up to the website or placing the warning message in a prominent spot above the so-called fold, i.e. in the part of the screen which the site visitor can see without scrolling.

Do get usability testing for the wireframes. To ensure that the measures taken to guarantee high visibility for the security messages it can be useful to perform user testing on the website – the earlier, the better. You can use interactive wireframes to see how a number of students will react to the warning message in order to optimize the layout and placement of the message. The goal is to get people to see and know about the danger.

Wireframe Don’ts

Do not make the warning messages part of the regular website. Few people will expect to see an emergency warning where they had previously read about a new campus project – even if it is on the homepage. Instead, use wireframes to determine the best spot for the message in other parts of the web presence.

Do not make the warning messages too complex. The wireframes can help you design security messages that are short and clear – many people will only glance at them or people with limited language proficiency may depend on the information.

Posted in Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool, user interface design tool, user interface design tools, user interface designers, user interface designs | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

How wireframing tools can influence user experience

Posted on March 23, 2012 by admin

User experience is the emotional response a person has to a website or software application. It is often difficult to predict what the user experience of an application will be. This can pose a challenge for website or software designers and information architects. In recent years, wireframing tools have become increasingly popular. Many usability experts believe that by using wireframing tools, you can discover at an early stage what the user experience of an application may be like. This is done by carrying out usability tests on the wireframe prototypes that you have created with your wireframing tool.

What are wireframing tools?

Wireframing tools are software applications used by people in many professions to create low-fidelity prototypes of user interfaces for software applications and websites. These wireframing tools are often used at the beginning of a project to help experts sketch out the layout of an interface design, before final implementation. This means that using wireframing tools can be a useful medium for experimenting with the user interface design of an application quickly and easily and for obtaining early feedback.

How can wireframing tools influence user experience?

Many usability experts believe that wireframing tools can be used to optimize user interaction and navigation in an application. By creating early-stage wireframe prototypes, testing target users’ response to these early interface design drafts and adapting the wireframes according to the feedback, the user experience can be improved. Wireframing tools therefore can help build applications with which the user feels more comfortable and to which he can develop an emotional relationship. This kind of optimization using wireframing tools can also help improve the conversion rates of a website.

Why is user experience important?

The user experience is extremely important, as it can determine the success of your website or application. Today, many businesses rely on their websites as first point of contact with their potential customers. The better the user experience, the more likely it is that a visitor will end up becoming a customer.

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

Why is it important to keep wireframe software simple

Posted on March 7, 2012 by admin

I have written before on the features of a perfect wireframe software. One property I feel I haven’t emphasized enough is the simplicity of the wireframe software. It is very important to me that the wireframe software that I use is functional enough and satisfies all my needs and yet is easy to use.

Wireframe software is meant to quickly sketch initial ideas or brainstorm the basic layout, often in a team environment. It makes sense to spend as little time as possible on this. If the learning curve of your wireframe software is steep you need to consider whether the trade-off between the time spent on learning to use this wireframe software and the time it helps you save in project work is really beneficial to you. Complex tools are then often more valuable in big, complex projects. But for small projects, you would want an easy-to-use wireframe software.

To create a low fidelity wireframe I only need very basic stencils, which is why I rejected some wireframe software right away. Having to look for the needed stencils and functions among a million of options that wireframe software offers seems to be a waste of time. On the one hand, rich functionality of wireframe software should not be regarded as a disadvantage. On the other hand, it is impossible to meet everyone’s requirements with the same tool, which is why I would rather use the wireframe software that has the functionality I personally require.

Another important consideration is customers who want to participate in the development process.  Many of them come from a non-technical background, and asking them to learn to work a complex wireframe software is difficult to argue – and unnecessary.  I like wireframe software that allows easy engagement of clients and other stakeholders. After all, getting the design that is right for the target audience is our final goal.

Posted in Wireframe, Wireframe Software, Wireframe Tool, user interface designs | Tagged , , , , | Leave a comment

Consistency in UI Design: Boring?

Posted on February 20, 2012 by admin

For many years web designers have believed in the mantra that consistency in UI design was critical for usability. This is the first axiom that web developers learned in their training. Today we see more and more experimentation in UI design, and consistency seems to play a less important role. Oscar Wilde once said, “Consistency is the last refuge of the unimaginative”.  Could this be true of UI design as well?

Many designers argue that experimentation is vital to creating a fresh and appealing UI design. Innovative UI designs invite users to play around and discover their features, which can make such UI designs appealing.

The other side of the medal, however, is poor usability. If experimentation in UI design leads to excessive deviation from common UI design patterns, users may have difficulty navigation a site at all. I am not totally against experimentation in UI design, but it should not impede on consistency and well-known UI design patterns.

One example of experimentation in UI design that, in my opinion, led to usability issues is the creation of tabs in MS Word. MS Word 2007 had probably the most user-friendly UI design out of all applications I had ever used. The 2007 UI design was simple and understandable. It encouraged users to play with it and learn by trying things out. The 2010 version of the UI design looks anything but inviting. Tabs are confusing, and under the tabs that are named the same as previous menus you will find a different set of options. Why change the UI design that was so convenient and make people relearn it?

To sum up, I am a fan of consistency in UI design. I think that users need consistency because it makes the UI design understandable, learnable and easy to interact with. After all, UI design standards (and consistency is one of them) were established for a reason.

Posted in Online Wireframe Tool, Ui Design, user interface designs | Tagged , , | Leave a comment

Differences between Visual Design and Clickable Wireframes

Posted on February 13, 2012 by admin

I am sure that if you work in web development you often have to point out that clickable wireframes and visual design have little to do with each other. Clickable wireframes may or may not resemble the actual interface of the website, but this is not what they are meant for. Yet, clients and other stakeholders never fail to remark that your clickable wireframes lack color and images.

It is all the more important then to distinguish user interface design from visual design. The former has to do with navigation, interactive elements and processes. This is what clickable wireframes focus on. When we create clickable wireframes we want to show how a user will get from one page to another or what steps he or she will have to go through during, say, registration. Clickable wireframes are the carcass of a website, which is why they are often created in low fidelity. Colors and images are not suitable for such wireframes because visual design comes at a later stage.

Clickable wireframes can demonstrate how a user will interact with the website. Despite low fidelity the interactive nature of clickable wireframes allows web designers to run user testing on the wireframes. Creating and testing clickable wireframes thus can help improve the user experience of future visitors to your website. Clickable wireframes can reveal problematic areas of navigation design and avoid rework when the coding begins.

I do not want to underestimate the importance of visual design. Clickable wireframes do not show how your product will be branded or what color scheme or font selection the website will have. This is the job of visual design. Visual design appeals to emotions and attracts attention. It is often thanks to visual design that a user stays on the website – that’s if the usability is right. However, it is important to understand that clickable wireframes have a completely different concept behind them; they precede but do not replace visual design

Posted in Clickable Wireframe, Clickable Wireframes, Interface Design | Tagged , , | Leave a comment