User Interface and Interactivity

User interface Principles

– Knowing your user

– Minimising the load on users

– Preserving Consistencies

– Ensuring flexibility

– Following standards

– Explicit

In order to adhere to these general principles, researching into our target audience has allowed us to come up with a suitable interface design which will appeal to the user. We would want a simple navigation system in order to appeal to the ageing house buyers market. Minimising the load through the use of drop down menus will mean users being able to easily and quickly filter the results location. Keeping it simple through the consistency of graphics and layout whilst following standards will mean users recognising how to navigate through the website easily. The buttons are labeled clearly letting the user know what they will gain by clicking on it. Recognisable symbols such as the magnifying glass will suggest the go or find button.

Code for drop down filter menu

Code for sort option

Finished home page

An interactive site will attract users and make them feel engaged, helping to reach its target audience. I aim to create flippers for the about page which will reveal text when hovered on. Similarly with the help page, in order to make information more engaging I will use jQuery to create an accordion where the answers to the frequently asked questions will be revealed when clicked on.

Interactive flippers

Code for Accordion

Reveals answer when clicked

As websites become more sophisticated users expectations are changing. A more active role is being expected. Not only can the graphics be interactive but user input to an extent. In our web app the use of an add property form will allow users to input their properties to the listings. This adding a different dimension to a passive property site. This as well as a sort and filter will benefit users with results they are looking for, helping to meet expectation.

Database – Entity Relationship Diagrams .2

Users table

Posts database table

Two tables: Users and posts

Data regarding the user is entered into the users table once signing up. Data such as username, name, password and email is stored. The posts table consists of information about the properties for example, house type, price, location, etc..the data will be called using php and jquery to display results on the web application.

Username and password are essential for logging in, the data will need to match to enable verification. This is important for security reasons. Each user is automatically assigned an identity number. This is similar with the properties listed, the id carries a time it was posted. The user id shows which user posted and at what time.

Git Cheat Sheet

Github

$ git config- –global user.name “[name]” – sets the name

Repositories:

$ git init [project name] – new local repository

$ git clone – downloads project

Changes:

$ git status – lists modifies files to be committed

$ git diff – shows file differences

$ git add [file] – snapshots file for versioning

$ git reset [file] – unstages file

$ git commit -m “[message]” – records file snapshot

Review:

$ git log – lists version history

$ git show [commit] – outputs content changes of that commit

Redo:

$ git reset [commit] – undoes all commits after [commit]

$ git reset –hard [commit] – discards all history, changes back to the commit

Synchronise:

$ git fetch [bookmark] – downloads all history

$ git merge[bookmark]/[branch] – combines bookmarks branch to local branch

$ git push [alias] [branch] – uploads all commits to git hub

$ git pull – downloads bookmark history and incorporates changes

Changes made using terminal

Group Wireframe

Home page

Sign up page

Login page

Home page once logged in

Results page

Add property page

About page

After researching into existing property sites and pulling our individual wire frames together we have come up with a solid design which we are all happy with.  We can now work separately with a shared goal in order to complete our roles, committing to git regularly.

Target audience

After researching into Righmove, one of the top 10 most visited websites in the UK, and their property retail site design, I felt it was important to look into who their target audience were and how they attracted them. I found their buyer report, March 2013, which indicated a rise of second time buyers who intended to buy with a 3% increase form the last quarter. Compared to average age of first time buyers, this being 30, those purchasing for the second time are on average 41. They found when conducting this survey, users used rightmove in order to move up the property ladder to find a larger house to accommodate their family.

The use of graphics on their home page suggest an audience with family and children; the flying kite.

Rightmove graphics

Our website application will target an audience of similar age and situation however, it will be more niche, targeting families wanting to move in or around Bournemouth, rather than the whole of the UK.

It will target users who want to view properties using a web app, or even users wanting to advertise their property in Bournemouth.

This can be done through the use of graphics. Including images of Bournemouth and large family homes.

Help page, image found on open source site

Infact our logo and web app name, reinforces this. We have incorporated BH – Bournemouth Homes – into the logo in order to convey the bournemouth post code.

Logo Development

Research and Privacy

Malcom Crompton told the Cebit conference in Sydney that using web 2.0-style services will only succeed if citizens feel completely comfortable with the privacy implications of the service. He goes onto suggest that the exhaustive amount of information asked without being reassured by any statement of accountability , the citizen is likely to choose either not to engage or engage in an unproductive way. Users will act with defiance when they feel their privacy is being impinged upon. For example, when facebook made a change that allowed for the exposure of a users relationship status a 700000 members petitioned. However, they will act positively when three key concerns are addressed- control, fair risk allocation and accountability.

When considering such an important decision as buying a house, privacy and the users trust is essential in order to create a successful web application. Be this through making sure information is correct and updated to giving the user control of their own information.

The use of simple to complete forms, such as sign up, would mean more reliable and trustworthy data. Furthermore, the use of if statements and messages would help reduce to amount of missing or incorrect data.

The use of sign up, login and sessions will help with the growing concern of privacy as a correct username and password will be needed in order to see and change account details. As well as sessions ending once the user has logged out.

Code showing login session

When researching into users trust in web apps I found colour is an important factor. Colours have psychological properties and can be said to relate to the body, mind and emotions. Not only is blue a commonly favoured by both men and women, but it is seen as trustworthy, dependable and committed. We are surrounded by the colour blue and it is seen to be a constant in our lives and therefore symbolises qualities such as confidence, loyalty and wisdom. When researching into existing property retail sites I found blue colour schemes to be very common. Blue and greys appear to be sleek and high tech, emphasising the users trust of the website. Websites such as rightmove and prime location have decided to use this colour in order to seem welcoming and reliable.

https://blog.kissmetrics.com/psychology-of-color-and-conversions/

Prime Location’s home page

Home page of rightmove

Colour extracting rightmove’s home page

Therefore, we decided to go with a blue, grey and white colour scheme in order to make our web app come across crisp and professional, a website users will trust when deciding something as important as buying a house.

Initial Wireframe and Research

Rightmove filter

Rightmove results

Zoopla home page

Zoopla results

Whilst researching into existing property sale sites i noticed they all had similar design layouts:

– Top navigation bar linking to all pages. Including the logo, which is usually text rather than an image

– The home page has a large central search bar

– Main focus on interactivity and the user being able to filter results to get the results they want

– same filter options- price, location, no. of bedrooms

– filter option on left hand side of results page

– results are shown on seperate cards, all include images, price, location and short typed description

– users can interact and personalise their accound through saving properties and contacting the agent

– white background, eye catching images

– Large colour/ image blocks

– simple but neat design with easy navigation.

– sign in/ register = top right hand corner

My own wireframes considering these observations…

Home Page

Sign in/ register pop up

Results page

About page

By following standards, users will feel comfortable in navigating through the website and thus will meet their expectations.

Workshop – Dummy Website

Home page

Code for login

Logout and sessions

During our workshop time with Kyle we have been creating a basic web application, which has the basic functionality to twitter.

– Use of a database to login

– Basic form to input data which will be shown on the home page

– if functions to show empty fields

– session to go to home page when logged out

This will be hugely beneficial with our task. I now have a basic understanding of databases and forms. However, i now need to go to lynda.com to make sure i fully understand the code covered and further improve functionality, ready for when i start the task. Be this through creating a sign up form.

Big Data

Web 2.0

– Second generation of the World Wide Web

– Static label given to the new era of the web.

– Rich User Interfaces

– Users ability to collaborate and share information online

– Open communication

– Open sharing of information

– Interconnected, producing online communities

– Our web app is a component of web 2.0 as it allows users to run programs directly in a web browser.

– The idea of users signing up to create an account and post their own properties adheres to this new level of sharing information online.

– “Applications that get better the more that people use them” – Tim O’Reilly. Without users input the listing of properties would be lacking.

More relevant examples, other than web apps include; social-networking sites, wikis and blogs. Thus the set up of our own wiki was essential in order to have a tight, in-sync team. Updated regularly with meeting minutes and job roles by all the members

Home page of wiki

When updating the wiki we need to keep to a set of rules. Similar with my blog, the group will organise the entries under headings and subheading, relating to the process stage, where we discuss what has happened, what we need to do next and how to go about it. This will allow us to easily see where we are with the task and what needs to be done.

Post layout

Net neutrality

– enables and protects free speech

– preserves our right to communicate freely online

– does not discriminate or block any applications

– level playing field – ‘The open internet order’

– crucial for small business, entrepreuners and startups. Foster job growth, competition and innovation

– lowers entry barriers

Large companies are able to pay extra to get faster internet and better service than the rest of us. For example, Comcast delivered a slower speed to Netflix due to their large web traffic, until they made a dea where Netflix pay for a direct connection between servers.

As O’Reily discusses, applications are better the more people use them. Net neutrality enables an open internet where the potential pool of users is growing, rather than being restricted. Smaller businesses such as Bournemouth Homes would find it difficult to compete with other larger websites. Reducing the amount of users and negatively effecting the data being shared. Harming the consumers and competition.

Frontend and backend technologies

Front end

– web design

– front end web development: html, css, javascript and jquery.

– things you see when using the web, including, font, drop down menus, contact forms, buttons and sliders, etc. However, in order for the data entered through the use of front end elements we need the back end to make this possible.

The front end development will be important when considering the user and userbility. Creating the best user experience possible. In this group project my role is to cover the front end. Considering the design and interface. I will need to consider user interactivity and design whilst practicing my skills in html, css and jquery to create a simple but effective web app that the audience will respond well to.

Back end

– Consists of a sever, an application and database.

– The application stores information into a database, which was created on a server.

– SQL, Ruby and Python are example of backend languages.

For our task we will be using phpmyadmin. The enhanced framework will help development and collaboration ease.When planning on how to go about the database we need to consider entity relational models.

erm

– database modeling method

– semantic data model of a system

– diagrams created through the use of this process are called entity relational diagrams, erds.

Entities – object or concept that is uniquely identifiable – represented as rectangles

Attributes – property of an entity or a relationship type- represented as ellipses

Relationships – meaningful association among entities – diamond shape connectors.

ERD

Strong entity type when the entity doesn’t depend or on any other entity type.

– Important when creating web pages with forms in.

– Will be essential when setting up the database for our web app; to make a functioning user community.

– In order for users to be able to log in and input their own properties, a form will need to be created to which the data will then be stored in a database. Usernames and password will need to be kept in a separate table to allow users to log in once signing up.

– Weak entities such as user id or house ids will need to be relational in order for the house listing to be associated with the published user.