Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

UCT UXD Module 7 - Wireframing

No description

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of UCT UXD Module 7 - Wireframing

So this is a wireframe. Looks a bit bland and boring, right? That's because it has to give functional information, not look pretty. Follow the user path across the interface to find out how to start creating wireframes. The questions you find are there to help you think along the right lines.
Are your icons clear and unambiguous? Does this isotype add extra meaning that the banner doesn't? Can either be dropped and still remain meaningful?
Is the UCT logo hyperlinked to their site? Does it appear at the top of every page of the GetSmarter VLE, or just in the course material?
Interface breakdown
:

Here is a breakdown of the main elements of the Balsamiq interface. This will help you get started with the software and find your way to the tools you will be using throughout the wireframing process.
Wireframing tools:

This video takes you through the various components that form the wireframe. These are the controls that you build your wireframe from, the tools of the trade.
What is this blank space for? Are there functional elements that should rather be placed here? If not, is this white space being used to effectively guide attention to the important areas of the page?
How does the user scroll in this window? Do they have to keep the mouse inside the window while scrolling, or do they have to click and drag the slide bar up and down? Should you add up and down arrows or will they be too small to use effectively?
Can the user contribute to this feed right here (if so, it needs a text field) or do they need to leave this page in order to do so? Does a constantly updating feed distract from the tabs and icons to the left?
Discover how to start populating the wireframe with various elements. Before you start creating your own wireframes, play around with each of the elements afforded by the wireframing interface so you know what possibilities are available to you.
Will hyperlinked text change colour when hovered over or clicked? Will the mouse pointer change shape when it crosses editable fields?
Will clicked elements open new tabs or windows or redirect the current page?
Annotating your wireframes is an essential part of the process. Here you have the opportunity to explain the thinking that goes into your design so that others can see and understand the logic behind your design.
Will the search results be displayed on this page or will the search function redirect to a new results page?
Will the search function scan the whole website or just the content of the specific page?
Some elements commonly work together, while others rarely overlap. In order to streamline the wireframing process, you will want to group elements meaningfully so that their use becomes simpler and more intuitive.
Will your navigation be broad and shallow or narrow and deep? In other words, will there be several dropdown selections, with a few options each, or will there be two or three dropdown selection with a multitude of options housed within them?
How will all of this resize when accessed with a different device?
To illustrate the results of user interaction with the interface, you can use a wireframe to create state flow diagrams. These show the state of an element (or group of elements) before and after an action has been performed.
It's time now to go create your own wireframes.
How will you construct meaning through wireframes?
Full transcript