DES501

Assessment 3 Reflection #5

All done! Our 20 page document on the website has been sent away to be marked, I feel really good about the overall experience with this assessment.We all did our best effort on the subject on top of juggling other classes.

If i had to do this assessment again, I would of liked to clearly show off our “community” aspect more in our presentation, as it was our main selling point to make us different from the other teams. The idea behind community was to create a “Facebook” styled hub for users to share their experience with others and in turn, creating sales from other’s wanting to replicate those experiences. From the survey of the 5 second test  and comparing it to our goals was a great way to see how we did for the user interface, however, if i had to do it again, i would possibly make the logo bigger and more defining so users will remember it, and I felt like it could of had something along the lines of a quote or sub heading to clearly address users that is a online game distribution store for example: “New Zealand’s #1 Game Store” .

(however, let William think of the quote as he is a better writer than me)

Advertisements

DES 501

Assessment 3 #3

This week, we reviewed what we have written on User Experience and User Interface and already at 10 pages! William and Erica had a combined what they have written for UX while i wrote up UI. For UI I went in depth into our main focus which was simplicity and using that as a talking point, described the main aspects of UI design. On top of that, i wanted to do something different and I showed our website to different types of demographics, however only for 5 seconds, as 5 seconds is more than enough to judge a website, from their answers i compared them to our intentions to see if what we have created followed our ideals.

QUESTIONS

  1. What do you remember about the site?
  2. What is the site about?
  3. how did you feel about the site
  4. would you use this site? or would you let your kids use this site?
  5. what did you think of the design?

FEMALE PARENT

  1. Their where video games
  2. Advertising video games
  3. intrigued
  4. Yes, i would be fine letting my kids use this as it did felt age appropriate
  5. It had clear intentions 

FEMALE TEEN

  1. I remember the name, colors and some of the the games on the screen.
  2. I feel like it is about games, animated movies/shows
  3. it feels and looks professional
  4. yes i would use it if i found more about it
  5. I think the overall design and colors are nice because they aren’t a hard to read off. the layout was simple and easy to understand

ADULT MALE

  1. Different games scrolling through a slide show. it was light blue with side navigation. couldn’t remember the name, it was Crescent wasn’t it?
  2. It looked like a store to sell games
  3. It looked modern, not busy. very clean
  4. Depending on what it does, was unsure
  5. Again, quite modern but should have a bigger name title as I didn’t remember it and I was unsure of its purpose

MALE TEEN

 

  1. Good, straightforward layout, aesthetically inviting/consumer-friendly
  2. “I’m guessing video games”
  3. Aesthetically pleasing,  not intimidating
  4. “Yeah”
  5. Professional, user-friendly, simple

 

 

 

DES501

Assessment 3 Reflections # 4

(Yes this one is coming out before #3. 3 was meant to come out earlier this week, but i am doing some research/public experiment with the crescent website and currently waiting on replies, so hopefully will be posted later on today)

With UX and UI completed, now we will be starting on Web Design, which from research and content supplied from NMIT(moodle, Presentations). Web Design is described as the overall theme, navigation, categories, sitemap, Search Engine Optimization. so the first thing we did was started to research and  make a sitemap to get an understanding of web design, SEO‘s and “Crawling”.

site map part 1site map part 2

By looking at the site map, it shows the main navigational categories (Green) and links within these categories(Grey).But what is a site map for? It is mainly used for “Crawlers” and sometimes users to navigate the website and “Crawlers” is referring to the SEO searching and analyzing the website to determine the importance of the website based on the users “key words” when searching with a SEO.

May have to do a bit more research into what to document about Web Design, but have a fair understanding of it.

 

 

 

DES501

Assessment 3 Reflection #2

Today, our group started to research what the aspects of UI and UX are:

User Experience:

Utility – Relates to how it may be used and the appropriateness and advantage in doing so

Accessibility – A system is only useful if it is accessibility to the user when and where it may be needed. the concept of accessibility: making the system useable for everyone

Usability – The ease in which people can employ a particular tool to achieve a particular

Perceived Value – a system represents the benefit that a user expects to get from using it. it varies from user to user and task to task.

Efficiency – User who can complete their tasks more quickly and across fewer touch points. People care about time they put into something especially when they view their time as wasted. every step between the user and the system should happen in the fewest steps possible

User interface:

Consistency – having the same layout, tone and approach across the whole website, so users can’t become lost/confused and then leave.

Feedback – having good feedback responses to interact with the users. for example, when the user hovers over a button, it could enlarge, move, change color, this gives user feedback on if it’s a button or just text.

Predictability – to provide the user with a sense of where they are: with clear headers;  Clear navigation of links,buttons

Learnabilty – creating a website, that is easy to learn and remember, will create a returning userbase.

Percievabilty – couldn’t find much about this one.

Wire-frame:

William started creating  a mock up of a wire-frame for the website using Axure:

WireFram

WireFrame 2

Animations:

I had a look around in Axure, with animations and creating positive feedback from the user:

animations.PNG

(These animations are nowhere near complete)

The Top tabs, when hovered over, will drop down a bit.

The game slideshow, will slide depending on what way you click and will be on repeat

 

 

DES 501

Activity 6.1

What is an Interface Element?

Interface Element’s are user based interactions with the site, this can include:

  • Input controls – buttons and text fields
  • Navigation controls – breadcrumb links and search bars
  • Information controls – help boxes and notifications

Over the years of websites and website design, almost all if not most of the interface elements have an affordance attached to them, so within UI Design it is a must to follow these affordances’ associated with each interface element. Here is an example of multiply elements being used in one form.

TradeMe Register Form:

 

6.1 elements

How many can you see in this form?

Before we dive into the details on the different interface elements and what they do, how many can you spot on the TradeMe register form? (let’s keep it simple and only look for User Input Controls)

 

Got your answer? let’s go through what elements there are!

 

1. Text Fields

6.1 Text fields

This allows the user to into text into these boxes. In this example the user would be enter:

  • Email – Name@hotmail.com
  • Password – Password123
  • Username – Name1998

2. Radio Button

6.1 Radio button.PNG

This allows the user to select ONLY ONE of the options shown. This is asking if the user is male or female

3. Dropdown List

6.1 Dropbox

This one allows the user to select one of the multiply answers provided by the website. this is asking the users birth date, another example:

  • First Dropdown list – Days: 1-31
  • Second Dropdown list – Months: January – December

4. Check Boxes

6.1 Checkbox.PNG

This allows the user to select one or more options provided by the website. this example is asking: if the user is over 18 and has read the T & C to check this box.

5. Button

6.1 Button.PNG

Here is the last one, a button, which allows the user to continue to the next part of the website

Here is some more details information about all the different interface elements

 

Example of an User Interface typography hierarchy

 

well what is typography hierarchy?

This is when the UI designer uses different fonts, font sizes, colors, italics, bold, and etc to catch the users attention in the correct order.

6.1.jpg

Hierarchy Photo

Example:Stuff Homepage

6.1 typo.PNG

What is the FIRST thing you seen when looking at this picture? it was either the “Fired for 310k payout” or “CON-DIMENT” headings, this is because they have the BIGGEST font size; they are located at the top; they have Bold Formatting and they also are a different color to the information. almost every news website uses typography hierarchy so users can easily find the different news articles with big bold headers, then a small sentence about the article to intrigue the users more into clicking.

 

 

 

DES 501

Activity 5.1

From the Smashing Magazine article What is User Experience

What are four challenges you see when incorporating experience design when building a system?

Money –

The main problem you can run into is money; not every company that’s wanting a website has the expenses to pay for a UX designer, web programmer, UI designer, and so on. So sometimes company thinks they can go without a UX specialist.

Complications –

Depending on the size of the team working on the website, adding in a UX professional can complicate things and increases the time frame of the clients project. This can throw off the clients interest in a UX designers.

Experience –  

A few people in the website industry say UX designers are useless because they have no real experience in creating the actual product.

Accuracy –

Because a UX designer deals with the user’s feelings and emotions when using the website and tailoring and reporting the feedback to the programmers, however finding this information can be hard and not always correct/effective.

 

 

 

DES 501

Assessment 3 Reflection #1

Today we started talking about Assessment 3 and reviewing the marking schedule. Here are some ideas the class made on what we think User Experience[UX] and User Interface[UI] is:

User Experience

  • Search engine optimization / Findabilty
  • Easy to use
  • Organised
  • Intuitive
  • User friendly
  • Responsive
  • Accessibility
  • Customer journey
  • Wire frame
  • Sitemap

 

User Interface

  • Colour schemes
  • Aesthetically
  • Buttons
  • Navigation
  • Founts
  • Symmetry
  • Breadcrumb links
  • Whitespace
  • Usability

 

We also did some very minimal research on some UI design software that we could use:

Axure

axure.PNG

this is my personal favorite because of the features shown, they are exactly what we are wanting for this project. Main reason we are thinking about going with Axure, is because it has online collaboration and that fits our team working structure PERFECTLY. The only down side, is we have to go through an application process to get an student edition, which i am waiting to hear back from (Finger’s crossed!)

Balsamiq

Balsamiq

This one was suggested from the Moodle topic 5 page. I don’t personally like this one, just because it doesn’t offer enough information on what the software offers and how it functions, however if we don’t get access to axure, we will have to deal with this : )

Lynda.com

Lynda.com has an amazing and in depth course about User Experience and if anyone hasn’t seen it yet, go watch it! its really worth it and gives you heaps of information (Found on Moodle under Topic 5:User Experience or Here is the Lynda link)

5 Second Test:

Find people who meet your target demographic and show them the home page for five seconds, then ask them the following:

  1. What do you remember about this page?
  2. What is this site about?

Then compare them to your intentions? do these meet your requirements or what we want the website to be about? if not change it. We will definitely use this method when we start the UI process of this assessment. (Online five second test)

I am really pumped for this assessment, its finally the interesting part of all the research me and my team has done. can’t wait to see the final prototype!

 

 

It’s faster to hit larger targets closer to you than smaller targets farther from you – Fitts’s Law

 

 

DES 501

User experience

Today, Olly came in again to talk to us about user experience and the processes of creating a successful website

Client: Brillliant Bungy – Bungy jumping company located at the top of the south island NZ

Who are the audiences for a Brilliant Bungy?

  • Tourists
  • Travel agenceys
  • Youth
  • Locals on holiday
  • Sponsors
  • Partnered businesses(equipment,Accommodation, etc)

Customer Journey Map:                                                                                                           visualization of a customers’ needs, feelings, barriers and objectives throughout the path.

What are the primary customer needs for Brilliant Bungy?

  • Safety
  • Entertainment
  • Cost
  • Location
  • Value
  • Opening Hours
  • Customer service
  • Minimum and maximum requirements(Age,Weight, Height,etc)
  • Extra Faculties

Information Architecture:                                                                                                Structuring information and content to support way-finding, discovery search and an overall pleasing user experience. “Creating order from chaos”

Draw the Top Level IA for Brilliant Bungy

Untitled drawing

Basic Wire Frame for Brilliant Bungy

Untitled drawing

What content could Brilliant Bungy use to engage customers?

  • Deals
  • Customer Reviews
  • Exciting Photos
  • Famous Personalities

 

 

UX: research, information, wire frames

UI:visuals, colors, Layout, Graphics

DES 501

Assessment 2 Reflections #5

Our team “Silver Stream” which included Erica, Ryan, William and I. We have officially finished everything with the design process for our current website project ” Crescent “, which is a brand new store to purchase games to compete with the current leaders Steam, however with a twist, it is hugely focused on community and sharing, this makes it unique and will become the “Facebook of the gaming world!”, hopefully the client enjoys our report and that we get accepted to start prototyping the final product.

I personally think as a team, we really came together with this project and did the best that we could with all our different skills and interests. We all had different views and perspectives on the project, which meant we all had something to contribute and say on the topic we where doing at the time.

I think our team did really well because, at the beginning of this assessment, we all didn’t know that much about design and didn’t know what to do. But from our researching, sharing all our findings with each other and us all working together online (and of course from the lessons from the best tutors at NMIT), we got a lot of work done!

Another reason i think we all worked together really well, is because we all more of the “quieter” students, so none of us was fighting to be a leader/powerful and force opinions on others. Our team was very horizontal/flat organisation structure and we all listened to each other and gave informative feedback.

From all of the things we had to research for this assessment, I found out i really like databases because I am more of a visual learner and compiling all the websites different entities and information about them into a visual form was really interesting for me!

Even if we don’t get the 85% pizza’s, I may have to shout them some myself because they all did an amazing job! I feel really confident and excited to start making the design become a reality with assessment 3!

 

Powered by WordPress.com.

Up ↑