Navigation Bar

In this week lecture we discussed Navigation bar on websites. It’s a basically a catalogue of products/services in store for example depending on what type of website it is. It tell what your company does.

Some Navigation menu are grouped by subject(homewares), tasks(flights) or Audience(men/women) or a mix.

The search by function kicks in if the website is too big and has to many subgroups to put on the navigation bar. I did an exercise on how to categorise a websites products to see if I grouped these products in a different way and to see if this company categorisation of products made sense or product were easy to find thus being a good user experience.

 

Transitions

Transitions are a change in element formating that occur at  different events. For example if you :hover or :focus on an element they occur over  specified time period which gives the effect of the element being animated.

The example below show the length and colour of the box changes when you hover over it.

Transition effects can be applied to many CSS attributes, including  width, height, background colour, density  etc.

Augmented Reality in Healthcare

Introduction

“Augmented reality (AR) is a live direct or indirect view of a physical, real-world environment whose elements are augmented (or supplemented) by computer-generated sensory input such as sound, video, graphics or GPS data. As a result, the technology functions by enhancing one’s current perception of reality” (Wikipedia. 2017).

Types of AR:

To date there are many types of AR. Four of the main types of AR, are:

Marker Based Augmented Reality

This uses a camera and a visual marker in the form of a QR-2D code. The camera senses the marker and overlays the appropriate computer image in the camera viewer. The position of the marker is used to control where the computer image is placed. The advantages of using this method are codes are easily recognised and images can be recalled quickly.

(Reality Technologies, 2016). 

Marker less Augmented Reality

This uses mobile devices in built GPS, digital compass, velocity meter to detect information about the devices location. The software can then overlay information about the location say on the devices camera view finder.

(Reality Technologies, 2016). 

 

Projection Based Augmented Reality

This works when an image is projected onto a real surface and the AR device detects how the user interacts with that image. One future application under investigation is the use of laser plasm technology to project a 3D interact image into mid-air. (Reality Technologies, 2016).

 

Superimposition Based Augmented Reality

Superimposed AR replaces the original view with an augmented object or view. This allows the user to get a “what if” view of a real place as seen through the devices camera viewer. An example of this is the IKEA furniture catalogue app. This app allows users to place virtual furniture on a view of their real room. This gives the user the ability to see what their room will be like before they make any purchases.

 

A Summary of Augmented reality in Health care

Augmented reality has many uses, already being explored and developed, in the field of medicine. These can be found in the areas of navigation, teaching, diagnostics, therapeutics, and surgical enhancement.

Its current or intended application

 Navigation

This is all about finding a local healthcare resource. Take for example the Lay-ar reality browser in conjunction with the AED4EU app which gives the viewer the position of the nearest defibrillator and, guides them to it, while overlaying a real-time picture of the current location. This has endless potential and could be used in conjunction with the phone owners calendar to remind them and guide them to a medical appointment.

(Mesko, B. 2016) 

 

Teaching

Another active use is in the field of medical teaching. An example of Augmented reality in medical teaching is the use of the ARnatomy software.  This is an anatomy teaching aid which projects descriptions of anatomy onto a video display of, for example, a bone.

Another example of AR in patient education is the use of google glass in helping new mothers navigate and learn the best practices for breast feeding. The mother has access to information projected onto the google glass while breast feeding and can link to a breast-feeding counsellor, who can view the breast-feeding baby through the google glass camera and offer reassurance and advice to the mother. (Mesko, B. 2016).

Diagnostics

AccuVein is a hand-held device that projects the location of blood vessels over a patient arm to guide a nurse or doctor to where best to take a blood sample. (Rothenberg, G. (2016)

Augmented reality is also used in plastic surgery with several apps available to show the patient how they will look after surgery. One example of this is Modiface. This allows patients to view their face pre-and post-operation side by side in a split screen. (Merchant, A. 2014).

http://modiface.com/news/360/im.png

Therapeutic

The visual enhancement application VA-ST, helps people with impaired vision by adding detail to their reduced vision via AR glasses. (Rothenberg, G.(2016))

Brain Power Is a collaboration with google glass to assist people in the autism spectrum, its aim is to provide education giving patients assistance in recognising facial expression and other practical skills. (Brain Power. 2015).

Surgical enhancement

Vipaar is basically a video support solution. This is used in conjunction with a set of AR glasses, where a remote consulting surgeon can project his hands onto the view of a patient, to guide the surgeon performing the surgery.

Surgical Navigation Advanced Platform (SNAP) is an AR that allows a doctor to demonstrate their plan for a surgery.  (Rothenberg, G. 2016)

Surgical Navigation Advanced Platform

Augmented Reality potential impact within healthcare.

One potential future impact of AR is in the field of medical teaching.  One example would the META 2 augmented reality head set. This is set to compete with Microsoft’s HoloLens in providing AR enhanced anatomy teaching in 3D. when wearing this headset, the student gets a 3D image of an object they are studying, it can zoom in and out allowing them to view structures below the surface. This benefits traditional 2D teaching as it gives the student the perspective of seeing the object, and how it relates to other pieces of anatomy. (Smith, S L. 2017)

META 2 Headset

Another future use of AR in medicine would be the ability of consultants to overlay the results of scans such as CT or MRI directly onto the patient. This would have huge impact on patient education allowing the doctor to show the patient these results more clearly. (Balch, O. 2016)

(Medsight Tech. 2017).

Medisights Tech has produced software that tests the possibility of creating a 3D picture of a tumour using augmented reality. This eliminates the need for x-ray or similar scanning. (Mesko, B. 2016)

How AR should be marketed in Healthcare

Our target audience is firstly the medical professional. To market a new AR product to this audience we would generate demo videos to show at medical conferences, and to upload to online medical journals. These would be supported by technical documentation, for further and more detailed information. The addition when presenting at a medical we would be able to provide live demos of the product. These demonstrations would also be ideal at medical and technology expos. The key messages this type of marketing material would deliver is the medical, cost, and time benefits to both the medical practitioner and the patient.

Equally we could invest some marketing effort in raising public awareness of our AR product, through the press & TV channels, Social media platforms. This would increase awareness of the benefits of our products to patients, which may lead to pressure/demand health practitioners/authorities to invest in our product.

The possible pitfalls in marketing the technology

One down side of video based marketing material is it may not demonstrate the benefit of the AR product to its full potential. Where possible, live demos would be the preferred media, dependant on a prototype being available.

Developing cutting edge software is a huge investment which means their price tag will be high. This may mean, initially, the target audience is the private sector, or even may require a public-sector pricing strategy to make it available to all.

The target audience is quite narrow as these AR products have a niche market which would limit the effectiveness of marketing these products through social Media.

 

 

 

 

 

 

 

 

 

 

 

 

References

 

Balch, O. (2016). The Future Of Healthcare: AI, Augmented Reality and Drug-delivering Drones. Available: https://www.theguardian.com/sustainable-business/2016/nov/01/the-future-of-healthcare-ai-augmented-reality-and-drug-delivering-drones. Last accessed 19th Mar 2017.

Brain Power. (2015). First Wearable Classroom for People With Autism. Available: https://www.brain-power.com. Last accessed 18th Mar 2017.

Medsight Tech. (2017). Medsights Tech-Taking you through and beyond. Available: https://youtu.be/b3_Wksrv1KI. Last accessed 20th Mar 2017.

Merchant, A. (2014). An Augmented Reality”Anti-Ageing Mirror” gave me nose job. Available: https://motherboard.vice.com/en_us/article/augmented-reality-just-gave-me-a-nose-job-and-a-face-lift. Last accessed 18th Mar 2017.

Mesko, B. (2016). Augmented Reality in Healthcare Will Be Revolutionary. Available: http://www.medicalfuturist.com/augmented-reality-in-healthcare-will-be-revolutionary/. Last accessed 18th Mar 2017.

Reality Technologies. (2016). Ultimate Guide to Augmented Reality Technology. Available: http://www.realitytechnologies.com/augmented-reality. Last accessed 18th Mar 2017.

Rothenberg, G (2016). 10 Augmented Reality Apps for Healthcare. Available: http://www.medpagetoday.com/practicemanagement/informationtechnology/59072. Last accessed 18th Mar 2017.

Smith, S L. (2017). Meta 2 is the Augmented Reality of Tomorrow, Today. Available: https://amp-tomsguide-com.cdn.ampproject.org/c/amp.tomsguise.com/us/meta-2,news-24662.html. Last accessed 20th Mar 2017.

Wikipedia. (2017). Augmented Reality. Available: https://en.m.wikipedia.org/wiki/Augmented_reality. Last accessed 19th Mar 2017.

 

 

 

Transforms

The Transform Property is the most recent feature of CSS3. You can change the shape of an element in many ways and directions. There two types of transforms 2D and 3D.

You can Rotate,Scale, Skew and Translate elements. Vendor prefixes are needed with many of transforms depending the browser.

1.-webkit-transform: rotate(30deg);

2. -moz-transform: rotate(30deg);

3. transform: rotate(30deg);

Rotate: Rotations are clockwise by default and measured in degrees.

Skew:Is to stretch an element in one or many directions.It works of either the x or Y axis and is measured in degrees.

Scale:Is increasing or decreasing the size of an element.You can scale on either the X or Y axis.

Translate: To translate an element is simply to move it on the x or y-axis, or both.

Rotate

Skew

Box Model before Scale change              Box Model after Scale Change

Translated element moved across(x axis) and down(y axis).

 

Many Transforms

Transform Combine

You can also combine transformers: translate & rotate elements.

3D Transforms

With 2D elements we have a X and Y axis but with 3D another axis comes into play the Z axis.With 3D transforms you can rotate on either X,Y or Z axis or combine all three.

References

National College of Ireland. (2017). Lesson 5: Gradients, Transforms and Transitions. Available: https://moodle.ncirl.ie/pluginfile.php/393228/mod_resource/content/0/Transforms.pdf. Last accessed 20th Mar 2017.

Gradients

Gradients are new types of images in CSS3. It allows you to add two types of colour to element and contrast between two colours. There are two types Linear & Multiple colour stop gradients. (National College of Ireland. 2017).

You can’t add transparency to Gradients  using the hexadecimal colour system . You have to use the RGBA (Red, Green, Blue, Alpha) structure. Alpha means transparency. The RGB values are (0-255) and Alpha values are (0-1) 1 is fully visible and 0.5 is slightly visible.(National College of Ireland. 2017).

Radial gradients creates an image of colour radiating from the centre of the gradient. (W3schools. 2017).

Below are few examples of Gradients i created

Linear Gradient Right & Left

Multiple stop colour Gradients

Transparency with RGBA Left & Right

Transparency with Box Shadow

Radial Gradients

Radial Gradient with box shadow

 

---

References

W3schools. (2017). CSS radial-gradient() Function. Available: https://www.w3schools.com/cssref/func_radial-gradient.asp. Last accessed 20th Mar 2017.

National College of Ireland. (2017). Lesson 5: Gradients, Transforms and Transitions. Available: https://moodle.ncirl.ie/pluginfile.php/393228/mod_resource/content/0/Transforms.pdf. Last accessed 20th Mar 2017.

 

The Box Model

The CSS box model is CSS elements that wraps around HTML code. It consists of Margins, borders, padding and content.National College of Ireland. (2017).

The content box is where you place the text.

The padding is the space between the content and the inside of the border.

The border outlines the padding and content of an element and has three properties width, style and colour.

The margin is the space around a border and are not visible.

HTML div tags are used together with CSS to make up the layout of a web page into different sections .(National College of Ireland. 2017).

All the above elements are used to create a box model.

We learned about shorthand coding which allowed us to place all the elements in the one line of code e.g  border: 10 px dashed #000;

We also covered div tag class and id’s to show how we can share elements and tweak individual elements over multiple divs.

Below are few examples of the box model i created:

CSS Hover Selector (:hover)

The hover selector allow you to change the look of an element when the mouse is placed over it. Below is an example: green box changed to pink when i hovered over the box.

 

 

References

National College of Ireland. (2017). Lesson 1:Reopening the Box Model. Available: https://moodle.ncirl.ie/pluginfile.php/393227/mod_resource/content/0/Lesson1-BoxModel.pdf. Last accessed 20th Mar 2017.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

References

https://www.w3schools.com/tags/tag_div.asp

Click to access Lesson1-BoxModel.pdf

 

 

Balsamiq not a Vinegar!

In this week lecture we were introduced to Balsamiq. What is Balsamiq? “Balsamiq is a low fidelity wire framing tool that can be used to quickly create an informal visual presentation of any kind of software interface such a desktop, web or mobile” (Balsamiq. 2017). It is used by many different professions e.g designers, Developers.

In this week we went to the next level with the roughly sketched wire frames we designed in the previous lecture. We designed a app for a person who is a diabetic and needs to monitored by the diabetic clinic.

The main function of this app is to monitor the patients medication,meals and exercise so that improvements can be made to the patients health.

The meds button when selected allows you tick the check box in the middle of the app when you have taken all your medication-Morning, Midday or evening.

The exercise  button when selected allows you see how many steps in kilometres you have completed that day,week, month or in total.

The Meals button when selected brings you to another screen where you input what you have consumed that day.

This app has a calendar, pop up alert -did you take you meds?, and call doc button if you have query or need to make an appointment.

 

 

References

Balsamiq. (2017). How to Choose a Wireframing / Prototyping Tool. Is Balsamiq Mockups the Right Tool for Me?. Available: https://support.balsamiq.com/sales/howtochoose/. Last accessed 9th Mar 2017.

HTML 5 & CSS coding…

This week we were introduced to the Coding using HTML 5. Firstly i learned the basics tags, common elements & coding conventions. We then moved on to the more complex coding which included creating lists ordered/unordered, nested lists,images as links, commenting and embedding HTML Video & audio into your webpage. Below are some examples we completed in class:

Ordered/unordered lists                                              Images as link

---

.mp4,.ogv & .webm HTML <video> supported by Chrome

HTML is not visually appealing on it’s own and there’s where CSS comes in.

What is CSS?..….

“The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should ‘look’— in terms of: layout. position, alignment, width, height, etc.” –(Motive. Ltd, 2006)

The idea of style sheets comes from the publishing and print world and why it is best practice to separate content(HTML) from presentation(CSS). CSS main features are as follows: (National College of Ireland. 2017).

• Controls html presentation.
• HTML has a collection of formatting rules.
• Style sheets can be read three locations: internal, external & in line.External is best practice as this style sheet can be used to format other web pages.

(National College of Ireland. 2017).

External link to CSS style sheet:

• CSS can format a single document to a whole website.

We learned that CSS code goes between the <style >tags in the head of your html document. See below example CSS i completed in Class!.

We also discussed Class & ID attributes .

Class attributes can be used on any element of HTML and as many times as you want. you can name your class what ever you wish . Classes are denoted with a period in front of the class name for example : .cvtitle

ID attribute differs from class attribute as you can only use it on one element of HTML on that page. ID are denoted with a #symbol in front of the name. i.e. #copyright

References

Motive Ltd. (2006). The Motive Web Design Glossary. Available: http://www.motive.co.nz/glossary/stylesheets.php. Last accessed 9th Mar 2017.

National College of Ireland. (2017). Lesson 3 Intro to CSS. Available: https://moodle.ncirl.ie/pluginfile.php/385994/mod_resource/content/0/Intro_CSS.pdf. Last accessed 9th Mar 2017.

Wire frames!

In this weeks lecture we discussed Wire frames. This is my first encounter with wire frames. “A website wire frame, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. . Wire frames are created for the purpose of arranging elements to best accomplish a particular purpose”-(Wikipedia 2017).

Steps in the Development of a Wire frame

Develop the Buyer Personas 

When designing Wire frames the first step is to develop your buyer persona the questions you need to answer are:

• Who will be your buyer?.
• What problem are you solving ?.
• What is your potential buyer looking to get out of your website/app?.

These questions can be answered by holding work shops, Focus group etc…

We discussed persona’s for a travel website

The user is a Single person who wants to have a great holiday experience and to meet interesting people. The potential buyer are looking to-Search, book, share and rate a holiday . Each of these actions are positioned in order of importance to the user. So the search for a holiday function is the most important tool for a travel website.

Class Exercise:  Develop a Wire frame & Persona for a Medical App

Our target user is  a 45 year old female, Diabetic, over weight, with very busy lifestyle. The purpose of the app is so that the  hospital can keep track of it’s patients daily health regime.

The Main Functions of the App is to monitor and record

• Medication.
• Meals
• Exercise.

It also has call Doc button if they the have medical query.

Low Fidelity Wire frame.

 

 

 

References

Wikipedia. (2017). Website Wireframe. Available: https://en.wikipedia.org/wiki/Website_wireframe. Last accessed 10 Mar 2017.

 

Jakob Nielsen’s Design and Usability Priniciples

In this weeks lecture  we discussed Jakob Nielsen’s 10 Design & Usability Principles. They are called ‘heuristics’ because they are more in the nature of rules of thumb than specific usability guidelines.

“On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave.”- Jakob Nielsen’s.

 Examples of Jakob Nielsen’s Principles

Visibility of System Status: The system should always keep users informed about what is going on & give feedback promptly. Logging in to face book is an example of the system status. It tells you what is happening so you know you have to wait a few secs.

Match between System and real World: The system should speak in a way that the users are familiar . An example of this is the folder icon which can be found in most applications on  Microsoft windows and is familiar to most users and we know what it’s used for.

User control and freedom: Users have the option to  select a task  to prevent a mistake been made. The example below gives users full control on what to do next – save, Don’t save or cancel.

Error Prevention: errors occur when you forget to do a task or the instructions are not clear.Error messages appear to prevent the user from making a mistake. Error messages should be clear, in plain English on how to proceed. An example of error prevention is as follows –  when sending an email and if the subject is not provided outlook will automatically inform the user of their error.

Flexibility and efficiency of use: This floppy disc icon is a shortcut used by all users.Everyone is familiar with what this images means.