Interactive Design - Exercise

30/08/2018 - 18/10/2018 (Week 01 - Week 08)
Isaac Lee Zahradnik (0330747)

Interactive Design

Exercise

---

INSTRUCTIONS

LECTURE

30/08/2018 (Week 01)

On the first day of our Interactive Design class, our lecturer, Mr Shamsul gave us a brief about this module and what to expect from it. After that, he told the whole class to find out what the terms UX and UI are/means.

From my understanding:

The term UI means 'User Interface', this person usually designs the overall outlook of the website.

The UX, User Experience, normally deals with the technical part of the website. How the user interacts with the website, to check whether if there's any bugs or not.

13/09/2018 (Week 03)

For this week's lecture, we learn more web design terminologies. Based on my understanding:

Call to action prompts the individual to perform a specific action. For example, like in Facebook, sign up or log in.

Breadcrumb is basically a navigation scheme that tells the user the location of the website he is currently browsing in. In conclusion, just like in Hansel and Gretel, breadcrumbs leave a trail back to home.

Pagination shows the number of pages. One example that uses this is Google.

Radio buttons only allow the user to choose one option, whereas Check box allows the user to choose multiple options.

Modal windows are basically pop ups.

Progress bar: Like it's name states, it shows progress.

Accordion are like menus, contains content. When clicked on, it expands or stretches out to show its contents.

After that, we learn the 5 usability attributes that designers should always keep in mind when designing/creating a web.

1. Ease of learning
2. Efficiency of use
3. Memorability
4. Minimize errors
5. Satisfy the user

20/09/2018 (Week 04)

In Week 4 lecture, I learned that Tim Berners-Lee published the first website in the world for the public.






27/09/2018 (Week 05)

In week 5, Mr Shamsul gave us a lecture about the hardware and software of the web. He taught us about the standards of the web. Web standards are used to set the rules for developing a website; and by using these standards, many visitors can access the website easily.

After being taught about Web Standards, we then proceed to learn some beginner HTML codes.

List of HTML codes we learned:

• Headings <h1>, <h2>, <h3>, ..., <h6>
• Paragraphs <p>
• List <li>
• List with order <ol>
• List without order <ul>
• Line break <br>
• Bold <b>
• Italic <i>
• Underline <u>

04/10/2018 (Week 06)

This week's lecture was about the Website Development Process, our lecturer advise us that before designing a website, we should always make sketches of what we plan to create. So that we could translate the sketches into an actual product.

The process are as follows:

1. Gathering Information: Purpose, main goals, & target audience
2. Planning Phase: Sitemap & Wireframe creation
3. Development Phase: Page layouts
4. Final Phase: Testing, alpha & beta launch

The next lecture session was about Extra Markup / Cascading Style Sheet (CSS). From what I know, CSS basically deals with the overall look or styling of the website





11/10/2018 (Week 07)

This week's lecture was about CSS again, but this time we are learning how to create box models in CSS.

 




EXERCISE

06/09/2018 (Week 02)

On the second week, we were tasked to figure out which websites are good or bad in our opinion. And, we must give our reasons why we think so. We should also bear in mind to not just look out for the usability of the website but also judge how it looks; whether if it's using the right typeface or principles of design. Mr Shamsul gave us two different websites to choose from, they both consists of many other/different websites to look at.

Below here were the spreadsheet that our lecturer gave us to list down the websites, and the pros and cons about it. After that, we were told to give a presentation about it to the whole class.

13/09/2018 (Week 03)

For this week's exercise, we were given a task to design an informational kiosk for Taylor's University. Each group has to come up with a scenario, the scenario for my group is that 'newcomers want to find where the admin office is.'

Below here is my group's draft:

27/09/2018 (Week 05)

After learning some basic HTML codes, we were tasked to make a basic HTML using Notepad.

Figure 1.0 A screenshot of both the HTML and codes side-by-side

04/10/2018 (Week 06)

After learning about CSS, we were tasked to create a resume via HTML document using CSS. We first need to type out the contents into the HTML document, then only we can change the styling of it using CSS.

Coding process in Adobe Dreamweaver

Previewing the HTML on Google Chrome

11/10/2018 (Week 07)

After receiving the lecture from Mr Shamsul, he then asked us to try making the box models in CSS.

Coding process in CSS

Previewing the Box Models in Google Chrome

18/10/2018 (Week 08)

This week we were given an exercise that would require us to use HTML along with CSS. We were given a brief of what our exercise is via the PDF file that our lecturer sent. There were a few images that came along with it.





Below here are the screenshots of the process & exercise.

Screenshot #1

Screenshot #2

Screenshot #3

Screenshot #4

Screenshot #5 

Screenshot #6

Below here are the final layout of the given exercise.

Top section

Middle section

Bottom section

FEEDBACK

Week 02:

When judging a website whether if it's good or bad, e have to know some terms that are used for Web Design. For example, parallax scrolling, ease of originality, readable texts. Keeping these terms in mind will help us when we are designing our own website.



Week 03:

General: We have to keep in mind the fact that some people don't know certain icons, and it's better to label them so we do not risk any confusion. It's also good to add a 'home' button so that we don't have to navigate all the way back. Plus, it's better to make a mind-map.

Specific: Label the icons.




Week 06:

Our resume needs to have full information about us. Things like our personality should be included in it as well.

REFLECTION

Experience

Week 01: Looking at all these 'codes', I really did not understand a single thing. But I guess I'll understand it eventually along the way.

Week 02: I get to understand the difference between a good and bad website.

Week 03: It wasn't easy or hard designing an information kiosk. But, there was a lot of planning involved.

Week 06: Adobe Dreamweaver was way better than using Notepad because I can at least see the live preview of the coding.

Observation

Week 01: People seemed loss.

Week 02: Most of the class have the same idea as to what a good website is & looks like.

Week 03: Everyone has their own ideas & designs, & a pretty complicated looking one as well.


Week 06: People seemed to be doing fine using Adobe Dreamweaver.

Findings

Week 01: Coding is very technical & a lot to remember.

Week 02: There are a few things that we need to consider about what makes a good website. Things like layout, information, usability, etc.

Week 03: Planning is very crucial to designing.


Week 06: The live preview was very helpful when coding.

FURTHER READING

Week 01

Understanding Learnability for Web Design: Tips and Best Practices by Jake Rocheleau.

The goal of learnable websites is to allow users to quickly ‘pick up’ and understand. This can be solved through onboarding, which helps the users learn the interface.

Learnability matters because people engage more with an interface once they know how to use it. Designing for learnability is important for users to stick around longer and keep using it.

Consistency breeds familiarity. Consistent interface is necessary for a good design. Meaning that it’s advisable to use common page elements that people are familiar with. Elements like navigation, logo, main content area should be easy to find.

Week 03


Everything You Need to Know About Dark Patterns by Carrie Cousins.

1. Intentional misdirection: The design purposefully gets users to focus on one thing as a distraction from something else. Usually this happens in the form of giving up unintended information to a website. But the most common form of misdirection is in the form of a tricky design, a common “no” button switches to confirm or the design looks like there is only one “right” answer. This is a common technique with apps and games where the “buy more” credits option is a big button and the “no thanks” option is small and difficult to tap. (Note in the example above that the more engaging visual button, also the first option, is a payment button. This pop-up came after clicking a “free download” button. That’s a definite trick.)
   
2. Hidden ads: When an ad appears to be content or navigation so that users click it.
   
3. Forced continuity: Read the small print; many free trials end with continuing charges. To avoid this dark pattern, don’t require payment for anything that’s free.
   
4. Growth through spam: Connecting an email address or social media account to a website – so you can find a friend to play a game etc. – and then spamming them all with info is a definite dark pattern. This can provide a lot of immediate growth for the site deploying the dark pattern when it looks like you are actually sending spammy emails or messages to contacts.
   
5. Hidden costs: Extra items that appear in a cart or hidden charges that the end of a checkout funnel are a dark pattern that isn’t as common as it used to be, but it still happens. More commonly, websites try to prevent you from redeeming coupon or promo codes – they apply but then drop off at checkout or if you look at other items. (Look at the example from GoDaddy below. Add a domain to your cart, click to checkout and privacy protection is added automatically unless you opt out.)

Week 04

Designing a Portfolio Website with Oversized Typography by Jake Rocheleau.

This article talks about how to sell your work. As stated, the goal of a portfolio is to showcase your work, but also in a way that would grab attention. How? By using large typography that would attract people to reading your ePortfolio. Not all portfolios can work with large typography but it works best on portfolios for developers or writers.

Week 05

How to Plan Your Website Redesign for Success by Armen Ghazaryan.

Why do you need a web redesign?

1. Better usability and more sales. If your website hasn’t been updated in years and you are losing potential customers because of serious usability issues, then website redesign might be a good option.
   
2. Structural business changes. Your business model has changed significantly, and your website no longer reflects your actual business. For instance, you used to have a physical flower shop and simple informational website. Now you have pivoted to online-only flower delivery service and need eCommerce functionality.
   
3. Branding. 55% of people are disappointed with a brand in general when they have a frustrating experience on their website. Fixing bad user experience can strengthen your brand.

REFERENCE LIST

Rocheleau, J. (2018, January 12). Understanding Learnability for Web Design: Tips and Best Practices. Retrieved from https://designmodo.com/learnable-web-design/

Cousins, C. (2018, July 23). Everything You Need to Know About Dark Patterns. Retrieved from https://designmodo.com/dark-patterns/

Rocheleau, J. (2018, May 17). Designing a Portfolio Website with Oversized Typography. Retrieved from https://designmodo.com/oversized-typography/

Ghazaryan, A. (2018, May 15). How to Plan Your Website Redesign for Success. Retrieved from https://designmodo.com/oversized-typography/