Models of Good practice

User Interface Design is a concept that covers the design of wbsites, computers, mobile communication devices and software applications

According to Wikipedia the followig bullet points are the principles of Interface Design:
  • The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.
  • simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user's own language, and providing good shortcuts that are meaningfully related to longer procedures.
  • The visibility principle: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don't overwhelm users with alternatives or confuse with unneeded information.
  • The feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
  • The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.
  • The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

    • Below are 3 examples of Websites that influenced my decision for the design of my website. They both have good interface design and gave me direction as to how to structure my website.

      The First example is a screenshot from a website tutorial on youtube. I used it for insperation for my website layout. There were three things that i liked about it as pointed out in the picture and these were:
        Navigation
        Margin
        Unordered Listing

      tutorial screenshot

      The navigation bar really stood out to me as i liked how it was structured and designed, especially the css border elements. However one thing i didn't like how the navigation bar was not centralised. The Margin layout was very good as well, what got my attention was the equality of both sides of the margin and i used the css for the margin on all my pages. Finally the use of unordered listing gave me an idea of how to design the interface of body of my pages.
      The Next example is the website that i used as inspiration for my final navigation structure, I used this page because the navigation bar was centralised as was my preference. I found this website whilst searching for examples of good "Interface Design". mockplus
      This final example is the website i used to create my contact form. It is from a wbesite called W3SCHOOLS

      w3schools

      As you can see below, there's even a editor on the website itself which allows you to test and mess around with code before implenting it into your web page.

      w3schools