I found an app a little while ago which allowed me to keep a record for a reading challenge. This was a lot of fun and could help younger children in reading books over the summer. I saw some of the feedback columns on the side of the user interface and one person suggested that there should be an iOS app for it. I thought this was a great idea and couldn’t help thinking that prototyping software might help.
The app which I used allowed people to come together as a team to read something. You log into the website and team members can record entries by simply typing the book name and chapter number into a text input field. This then kept records of the number of chapters and how consistent the reading was. Since the main website had a very simple UI design, it would probably not be difficult to prototype an iOS app using prototyping software.
Prototyping software is a tool used to sketch designs of websites and software applications. The prototyping software should enable the user to include various elements needed to design a product (such as a placeholder for the logo, or a text-field and buttons.) The app could be designed to have the same background and logo, but just on a smaller scale. This could easily be done with prototyping software and then simulated to see how it functioned. When the design was finished, it could be given to a web-developer to actually program according to the design specifications. This would be much faster than programming the app and then making changes based on feedback.
To have apps to help us organize our lives is useful, but it is even more encouraging when these apps can bring us better educational opportunities or encourage reading for children. What other iOS apps could be designed using prototyping software? I guess that depends on us!
Posted in Clickable Wireframe, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe Software, Wireframe Tool
|
Tagged gui prototyping, interface design, paper prototyping, prototyping software, wireframe, wireframing software, wireframing tool
|
For online shops, a website is a necessity. This is where potential customers can find out information on a product, select a purchase, and complete an application. Having a user interface that is both usable and attractive for potential clients is therefore important as this can impact whether people decide to make a purchase. Drafting a retail website can be a difficult task though, especially when considering how much the user interface designs of retail websites can differ. Creating wireframes can be a useful way to draft a user interface design, which can be shown to potential users for feedback. By gathering opinions on the prototypes you have created with wireframe tools, you can then optimize your prototypes to help ensure that the UI design is usable and accessible to target audiences.
How to create a prototype with a wireframe tool
For example, when you use a wireframe tool to create a draft of an interface design, remember that your design should encourage the user to make a purchase. Ensure that call to action buttons are large and that you sketch lots of clickable elements into your wireframe. Some wireframe tools enable you to insert navigation bars and other menu types into your prototype. This is especially beneficial for retail websites, as products are often organized in different categories. If you are thinking of sketching a prototype for a retail website, it is beneficial to find a wireframe tool that lets you prototype interactive elements. Clickable wireframe software enables you to click through the buttons of your prototype, which will respond in a similar way to your end product. You may choose to simulate your prototype in user testing, in which case you can see how your user responds to the structure you have created. You can then optimize your prototype to ensure that your design concept matches users’ expectations to help boost conversion rates. With the retail industry moving from the high-street to the virtual world this is becoming more important than ever.
Posted in Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Prototyping Software, Ui Prototyping, Wireframe, Wireframe Tool, Wireframing Software, software user interface design, user interface design, user interface design tools, user interface designers
|
Tagged 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, user interface design, wireframe, wireframe software, wireframe tool, wireframes, wireframing, wireframing software, wireframing tool
|
Creating wireframes can be a great way to prototype a web application. There are many advantages to using wireframes, namely that these can be used to help optimize the fundamental aspects of a UI design. This is because wireframes can be shown to potential end users for feedback and this often helps designers when making decisions about what should be changed in a UI design. With affordable clickable wireframe software on the market, this prototyping process can be taken even further and interactive elements can be sketched. This means that designers can now experiment with clickable elements of their designs relatively quickly and easily. For children’s websites or other applications, it can be a good idea to create unique clickable elements, which can make the interactive experience more fun.
How to make interactive elements interesting
When a user clicks on an element in a user interface, they will expect a response. This can be a written response, such as a confirmation message. With clickable wireframe software, you can experiment with this type of message and write these with less formal language, or be more direct. The benefit of using clickable wireframe software is that this can then be simulated and shown to users for a response. There are some types of clickable wireframe software that respond when a user hovers their mouse over an interactive element. The button, for example could expand in size to encourage a user to select it.
User feedback and clickable wireframe software
Some of these software companies enable integrated usability testing, which means you can view how users respond to the interactive elements of your prototype. Creating a prototype with clickable wireframe software is often quick and relatively inexpensive, which means designers can often experiment with different design concepts. You may want to create alternative prototypes for A/B testing, which means you can get feedback from users to see which clickable elements they liked better. By prototyping unique interactive elements with clickable wireframe software and usability testing, it could actually help your final design concept be more successful.
Creating wireframes is often the first step in a development project. Wireframes often help developers and clients to visualize a future interface that includes the main features. Wireframes are important because they provide a basis for user testing and can serve as a first deliverable for customers. Wireframes are also fast and easy to make, especially with an efficient wireframing tool. The difficult part of creating wireframes is deciding how much detail and functionality a wireframe should contain to fulfill its purpose.
The truth is that there is no particular rule for creating useful wireframes. To a large extent, the fidelity of wireframes is determined by personal preferences. Some developers and designers prefer low-fidelity wireframes which they can quickly put together in front of their clients. Low-fidelity wireframes are usually static and only represent the basic structure of interface design, but there are some wireframing tools which allow clickable wireframe, which are interactive wireframes. These interactive wireframes would allow you to click on a component in a wireframe and it would bring you to the next page in your set of wireframes. This way, you can interact with the wireframe as if it were a real website and not just a static set of wireframes. Aside from low-fidelity wireframes, other professionals like their wireframes to be more detailed, because these can look more professional to investors and clients. These are called High-fidelity wireframes. High-fidelity wireframes contain finer details of GUI
design, like texts, navigation, buttons, dialogue boxes, images and so on.
When deciding the wireframe fidelity for a project, you should consider the project’s scope and costs. While low-fidelity wireframes might be insufficient for full-scale user testing, high-fidelity wireframes may be outside the project’s budget. In my opinion, sticking to medium-fidelity wireframes is the best option. It is not necessary to include every detail of the interface design in medium-fidelity wireframes, but these can form a good basis for following prototypes and can also look impressive to stakeholders.
In today’s market, more and more website developers are using UI prototyping. Whether they use paper prototyping or wireframe software, UI prototyping allows people to draft their own designs and get a better idea of their key objectives and implications of their design decisions. UI prototyping in combination with user testing can also be used to see how users respond to the visual or functional design of a prototype.
Why use UI prototyping?
This month YouTube changed its user interface with dramatic consequences. The new user interface design focuses more on the different channels available and linking content to social networks. While many consider this to be the future of media, many bloggers reported how users struggled to adapt to the design overhaul. UI prototyping and user testing is a way of assessing how users might respond to a new interface design. With so many different users from a wide range of backgrounds, YouTube had the difficult task of balancing a range of requirements from a variety of target groups. In this balancing act, UI prototyping gives designers the potential to adapt their ideas and integrate user feedback into designs in the early stages of development.
UI prototyping and usability testing
UI prototyping is especially useful in combination with usability testing. Designers can show their prototypes to users or even allow users to interact with the UI prototypes. Observing the test users’ behavior during the test and interviewing them about their user experience can uncover critical design mistakes that can be corrected before going into implementation. This is why UI prototyping is an important stage in development, as designers can gather feedback from users to see what interactive features they respond well to, or what problems there could be with the layout or other visual aspects of the user interface design concept.
Wireframe tools allow you to visualize how you want your website to look. Some wireframe tools allow you to create basic prototypes of your website design, for example a static screen mockup. Other wireframe tools allow the user to create more advanced prototypes, which include interactive elements that a user can interact with, for example by clicking on a link to another page, or simply showing the content of a drop-down menu or picking a date from a date picker.
Static wireframes are appropriate when you want to create a fast and basic prototype of a website. This is particularly useful in the initial stages of a design concept. A static wireframe may be a paper prototype sketch, a design of the user interface created in a graphics tool or a mockup designed in a specialized wireframing tool. In a static wireframe, the focus is on the layout and the visual elements. You can use this static wireframe to show users your designs and ask for feedback. This will give you time to change any problems that may arise early on while prototyping.
Clickable wireframes are often used in the next stage of the design process, or when you are interested in describing or experiencing the functionality of the website and the real user experience. If your clickable wireframe links to other pages in your prototype, you can use these wireframes in user testing to see how your end users will navigate around your page. This will enable you to see what steps your users take to find information or solve certain tasks. If your clickable wireframe involves other modes of interaction, you can also perform usability tests with your prototype to analyze and change any obstacles your users may encounter before implementation.
Wireframes are often a very useful way to prototype your website. Static wireframes are more basic than clickable wireframes and can often be produced more quickly, depending on how detailed they are. High-fidelity static wireframes may also focus more on the visual aspects of the future website. Clickable wireframes are used to prototype the interactive functions of a website. With both forms of wireframing, it is useful to get feedback from end users, so you can change any features that could be problematic before programming begins.
Posted in Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool
|
Tagged wireframe, wireframe software, wireframe tool, wireframes, wireframing software, wireframing tool
|
When optimizing a user interface design for learnability one needs to consider several factors that go into justifying learnability. I shall now go over these factors and the more they apply to your product then the more you have to think about the learnability of your user interface design.
- Importance – The more important your website or app is to a user’s workflow the more time they would be willing to invest in learning the user interface design. One needs to look no further than graphic designers and other creative pros who spend considerable time and money to master the intricacies of the likes of the Adobe Creative Suite range of tools.
- Frequency – How often will users be using a user interface design? The more a website or web app is used the easier for users to internalize using it and use it more efficiently. A user interface design that is used relatively infrequently could require more thought vis-à-vis learnability.
- Cost – The Value Attribution theory states that if something is expensive then we assume it must be of better quality. This does not mean you should purposely overcharge users for your product. After all the flipside of the Value Attribution theory is that expectations rise along with the cost. Charge too much and a solid product suddenly might become unworthy of adulation.
- Alternatives – If your user interface design is simply too frustrating users will, quite simply, look for alternatives. Even if your website or app doesn’t have serious alternatives to contend with it is important to tackle all usability issues before a better alternative crops up.
An example of incorporating learnability in a user interface design is the Google iOS app (a lot of smartphone and tablet apps work in this manner too). A tutorial overlay sits on top of the default user interface design when the app is first opened. This overlay provides concise instructions to the main features of the app allowing new users to quickly get acquainted with the user interface design. In other words learnability is all about empowering users by helping them help themselves.
Posted in Ui Design, Ui Prototyping, user interface design, user interface design tool, user interface design tools, user interface designers, user interface designs
|
Tagged software user interface design, user interface design tool, user interface design tools, user interface designers, user interface designs
|
This is the first part of my two part blog post on the importance of learnability in user interface design.
One of the cornerstones of solid user interface design is to ensure the maximum usability possible for users of your website or software application. A user interface design could very well be pretty but if it’s unusable then users are bound to get frustrated and cross over to your competitors’ side. Another crucial component tied to usability that is gaining more and more traction today is learnability. In terms of user interface design learnability is when a user interface design is optimized to teach users how to use it. Pretty much every new user interface design we come across requires some level of learning it, however much the steepness may vary. The learnability of a user interface design is now even more crucial than ever as the computing landscape stratifies into various form factors.
Ever since the inception of the GUI user interface design has largely been based on the venerable desktop coupled with a mouse and keyboard. Today there are smartphones and tablets using a number of natural user interface designs as inputs. For smartphones the preferred mode of input has become the touchscreen, while voice control is also gaining in popularity. These all call for users to learn new ways of accessing their favorite websites and apps because not every user interface design element is going to be instantly usable. With the desktop there has been plenty of time for user interface design conventions to come to the fore. Many mobile devices apps have to arguably pay more attention to the learnability of their user interface design. Invariably this means making decisions such as which features to add to the default user interface design and which ones to bury in advanced settings. But even more than that how are your users going to be shown how to use the user interface design, by way of a tutorial for example.
There are a number of to-do list apps available for iOS and Android devices but one of the most interesting, at least in terms of user interface design, is the ‘Put Things Off’ productivity app. Whereas higher priced apps such as OmniFocus include the gamut of GTD (Getting Things Done) features there is a vast market for simpler variants. An example of such an app is the popular ‘Things’ app which has even won an Apple Design Award for its pristine user interface design. Put Things First is made in the same vein but also adds some unique user interface design elements that improve on the usability. Honestly speaking Put Things Off is also much less complex and easier to use than Things.
Adding tasks is a breeze with the clear user interface design devoid of noise. There is a + button at the top left of the user interface design with the four folders at the bottom. These four folders are ‘Inbox’, ‘Today’, ‘Put Off’, and ‘Done’. However, what makes the user interface design so unique is the tasks themselves. Thanks to one-touch filing users can favorite, toggle to complete, share right on the standard user interface design. A lot of GTD apps require a user to open up a task in order to see advanced options. Users can also drag-and-drop tasks into any of the four folders as well as combine several related tasks into a stack. The user interface design also has several nice touches such as the folders filling up with tasks as an indicator of sorts, as well as the welcome ability to create and edit tasks on the main user interface design.
Facebook is known for, even arguably notorious for, numerous tweaks to its user interface design. The recently concluded f8 conference saw Facebook introduce one of the most radical user interface design changes in a long time. Amongst the major UI design changes are the revamped navigation bar and news feed (not to mention the under-reported bigger ad banners). However the most intriguing feature was the introduction of Timeline. Timeline seeks to represent a summary of a users life in a user interface design that is heavily centered on photos and visual appeal. Think of it as a visual history of sorts showcasing a users milestones starting with their birth.
What are some of the user interface design characteristics of Timeline?
The visually striking user interface design is chronologically similar to the news feed and the wall as the further one scrolls down the further into a user’s past one goes. The UI design of Timeline, however, incorporates all of a users’ Facebook history such as status updates and photos that they are tagged in. Naturally users have to add missing “life events”, for example their birth, in manually. Facebook, in a way, is seeking to not only database the whole world but to be the book of life with as much of humanity’s existence neatly cataloged in a pristine user interface design as possible. Personally I’d be very curious to have seen my great-grandparents Timeline, for example.
What could Facebook be trying to achieve with Timeline?
Naturally this only serves to augment the debate of whether Facebook really is an ominous Big Brother after all. All things considered Timeline is an intriguing prospect, a Web 2.0 public diary of sorts and perhaps an assisted walk down memory lane. Unfortunately due to a current lawsuit Timeline has not been fully deployed meaning I haven’t had the chance to gauge the user experience of customizing its user interface design. As long as users can easily customize the amount of information displayed in Timeline it should be a welcome addition. Another good option might be the ability to toggle Timeline to a private mode simply to allow privacy conscious users the chance to give the new feature a go.
