User Experience and User Interface Defined
Users need to feel engaged and at ease when they visit your website.
By Leila Kojouri
Think about it this way: The user experiences only front end interactions, such as the look and feel of the website/application. More often than not, they don’t concern themselves with the back end – like app design, coding elements, or methodologies employed in content layout. What’s more, users need to feel engaged and at ease when they visit your website. That’s where UI engineers come into the picture – to fulfill this task.
Cultivating a User Interface can be divided into two phases in website/application/software development:
- Research + Design
Research and Design:
Research and analysis are all about interviewing users & project stakeholders and gathering their input to create a requirements document that includes personas, user scenarios, user behavior, and user experience evaluation metrics. During this phase, it is also important to understand the target audience so as to better cultivate a user experience design.
Business analysts and a user experience team usually lead the research phase. Both teams collect all information and inputs from users and project stakeholders in order to discuss technical terms with developers and project managers. Lastly, they prepare final documentation.
With the help of documentation, UX teams start the design process. They first create the wireframes to bring a rough idea to the project stakeholders and users.
Wireframes are presented as a comprehensive screen layout consisting of black and white sketches of every screen in the application. At this point, the visual and graphic design processes dictating the visual appeal have not yet begun.
Next, developers must focus on creating prototypes that will simulate the real application. A prototype can contain one or more features, but it actually does nothing. It merely simulates the behavior of a real application, and users can see color combinations and minimal functionality in real time. Wireframes/Sketches and Prototypes are done by UX designers.
Tools to create Wireframes and Prototypes
UX Designer Role and Responsibilities:
- Strong conceptualization ability, strong visual communication ability, drawing skills and sketchbook technique.
- Strong working knowledge of Photoshop, Illustrator, InDesign, Fireworks and associated design tools.
- Experience with user interface design patterns and standard UCD methodologies.
- Excellent verbal and written communication skills, especially the ability to clearly articulate design decisions with stakeholders and development teams.
- Understanding of common software development practices.
- Solid understanding of user-centered design principles, careful attention to detail, and ability to grasp complex, nuanced product requirements.
- Collaborating on user experience planning and researching interaction design trends.
- Researching technology trends.
Note: Responsibilities would be based on company and project requirements.
UI development can be considered as the middle ground work by combining both design sensibilities and technicalities together. UI developers are skilled at making a smooth appearance and proper functionality in a browser/device at the same time. They have the production skills vital to communicate with backend developers and collect data from server/backend and displaying to the user. They are fully responsible for the client side/front end logics including web design and functionalities.
UI Developer and Role and Responsibilities:
- Responsible for building Web Applications using Single Page Application (SPA) paradigm.
- Develop software solutions using industry best practices and in the area of security and performance in a web and SOA architecture environment.
- Effectively develop in a clean, well structured, easily maintainable format.
- Participate in the full SDLC with Requirements, Solution Design, Development, QA Implementation, and product support using Scrum and other agile methodologies.
- Skilled in using a CSS preprocessor to speed up development (LESS, SCSS).
- Detailed knowledge of cross-browser UI issues and hacks.
- Social technology API experience (Primarily Facebook, and also Twitter)
- Experience creating, as well as consuming, JSON-based APIs.
- Understand executing accessibility and progressive enhancement presentation.
- Ensure design consistency with client’s development standards and guidelines.
Note: Responsibilities would be based company and project requirements.
A few examples of UI Developer technologies:
- HTML5 and CSS3
- Bootstrap, Boilerplate
- jQuery and jQuery Mobile