User experience
The practical, experiential, affective, meaningful and valuable aspects of human - computer interaction.
User experience encompasses all aspects of the end-user's interaction with an organisation or company, and its services, and products.
At times it can be a highly subjective field, as the end user(s) can not be expected to perfectly align, and a product, application, website etc must be prepared to think of its end users as a collection of individuals.
Although it is only one small part of being a full-stack developer, it is probably the most important. A webite is much like a supermarket in this repect. It doesn't matter how modern, efficient, and well organised the staff and delivery areas are, if the produce is not fresh, the store front clean, the aisles ordered as expected, and the staff courteous, no one will want to use your store.
Much like a website, you can have the most up to date os and server software, clean, neat, efficient back end code, and well structured database, if the front end is not eye catching, fresh, and understandable, you will have no site visits let alone return of investment.
A unique experience
A quick over-view at browse happy, give six major browsers, but these do not include some of the rarer browsers, such as Amazon Silk on the Kindle, and proprietary browsers found on devices like Smart TV's.
There is also an increasingly wider range of screen size of devices, ranging from small mobile devices, through tablet devices, laptops, desktops, to 4K Smart televisions and other UHD devices, which are not uncommon to be 40 to 75 inches (100cm to 190cm) accross.
Consider that "out of the box" Bootstrap 3 shipped with 3 screen sizes, while Bootstrap 4 has 5 default screen sizes. This range of browsers and screen size does not however result in a simple formula of 6 browser possibilities accross 5 screen sizes, 6 times 5 does not equal 30 possibilities. Some browsers are incompatable with certain devices, Firefox for example is rarely found on anything other than a laptop or desktop computer, Internet Explorer and Edge do not run on Apple devices.
Then consider that video games consoles can not guarantee the screen size of the device they will be conected to and most of these come with a built in browser. Some tablet devices and mobile devices can also either be directly plugged into, or stream to a bigger screen size device.
There is no point in attempting to define what or who the end user is, one can only consider the technological possibilities and offer alternative solutions.
The difference between UX and UI
User experience and user interaction are two terms that are often erroneously used to describe each other. The fact is that these are two different concepts. In short user interaction is a concept or practice that forms a part of user experience. As stated user experience deals with the whole practical, meaningful and affective context. Interaction deals with the practical side. It's best summed up as good interaction, will give a good experience.
User experience
- Is it a positive or negative experience to use the product?
- Is it eye catching, clearly branded and interesting?
- Was I abe to find quickly what I am looking for, and was there other content to keep my interest?
User interaction
- Can the product be used and does it work as expected?
- Is it clearly laid out, identifiable, and easy to navigate?
- Did the content and controls behave and look like their real world counterparts?
Planning for good user experience
User experience encompasses all aspects of the end-user's interaction with an organisation or company, and its services, and products.
At times it can be a highly subjective field, as the end user(s) can not be expected to perfectly align, and a product, application, website etc must be prepared to think of its end users as a collection of individuals.
Although it is only one small part of being a full-stack developer, it is probably the most important. A webite is much like a supermarket in this repect. It doesn't matter how modern, efficient, and well organised the staff and delivery areas are, if the produce is not fresh, the store front clean, the aisles ordered as expected, and the staff courteous, no one will want to use your store.
Much like a website, you can have the most up to date os and server software, clean, neat, efficient back end code, and well structured database, if the front end is not eye catching, fresh, and understandable, you will have no site visits let alone return of investment.
The role of the developer
A critical error made by a lot of organisations is to not involve the developers at an early enough stage. A lot of the concepts of User experience are abstract and theoretical, with no requirement to involve UX, UI or web developers, whether they be full stack, front, or back end. Testing and even design can be achieved by users with a variety of experience of web development and coding skills, and indeed it is sometimes appropriate not to involve the developers in research and UAT (User acceptance testing) as they can be to "attached" to a design or build, and can ask leading questions (unintentionally or otherwise).
However the biggest mistake is to assume that development follows a linear patern of research, design, test, build. This is the classic waterfall developmental model. Rather it is more important to involve developers early and follow an agile model, where smaller cycles of research, design, test, and build are followed. Under tight deadlines, very little consideration can be given to the development phase, based on an assumption that everything will be in place by that point. This can result in the key stage of the build being rushed, with no context for the builders or developers. So for everything to be in place at the development stage, the developer, obviously, has to be involved.
Prototyping
A prototype in terms of web or software development is, like the name suggests, a first or initial impression of what the final product will be like. Protoypes scale from very simple, low fidelity designs that are easily started, and as equally easy to discard, to high fidelity - much more comprehensive designs that take changes and amendments with a greater degree of difficulty than their simpler predecessors.
High fidelity prototypes reflect a more polished, final look design, and it is better to scrub ideas and designs that do not work or meet requirements early on when they are simply ideas on paper, rather than code with resources, time, and money invested into them.
Sketch
Low fidelity
Sketching is one of the earliest forms of prototyping you can use. Also known as paper prototyping, it requires very little effort and does not necessarily rely on artistic levels of drawing skill to prove useful, and therein lies its value. Sketeches can be laid on top of each other to demonstrate functionality, and it is at this stage that test subjects will be most honest as to what direction they feel a product should take.
Wireframe
Mid fidelity
A wireframe is graphic structure of a website or app containing more defined content and elements. Generally they only contain placeholder text, lines, boxes, and gray color (different grayscale indicates the different level). But can begin to introduce branding and content more appropriate to the finished product. Although still very much limited in functionality, this is where more concrete and finalised designs are introduced.
Mockup
High fidelity
Mockup is the "visual script" used for the presentation of the overall visual design of the product. It has a richer visual elements than wireframe, including graphics, layout, color, and should contain final version of the content. This is in effect the final design of the product, and will be capable of demonstrating functionality. Testers will be less likely to offer criticism at this stage so it should only require minor changes.
Responsive design
This is the practice of developing a website or application that will "Respond" to the screen size of the device it is displayed on.
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their between desktop, laptop, tablet and mobile, the website should automatically switch to accommodate for resolution, image size and scripting abilities. Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic. Responsive web design is an example of user interface plasticity.
Graceful degredation V Progressive enhancement
This is a consideration for how you develop a website or application, based on the principles of responsive design. In short, do you start with the basics, and build on them as resources become available, or do you start with the best possible, and remove features as it scales down.
Graceful degredation
(Fault tolerance)
- Full webpage / app content and functionality first,
- Remove the requirement for advanced functionality,
- Try to fix or explain for the lesser experience.
Progressive enhancement
(Mobile first)
- Core webpage / app content and functionality first,
- Build and add in more advanced functionality,
- Aim for constant extension for future environments.
Accesibility
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.Tim Berners-Lee, inventor of the World Wide Web - www.w3.org
The Web must be accessible to provide equal access and equal opportunity to people with diverse abilities. Indeed, the UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right.
Accessibility supports social inclusion for people with disabilities as well as others, such as older people, people in rural areas, and people in developing countries.
In short - Can all users make the best of the content on your site or application?