Bridging the gap between web design and software engineering through UI prototyping on UPF’s Interaction Engineering course.

The first year undergrad students in the ICT Engineering department at Universitat Pompeu Fabra, Barcelona (UPF), have been redesigning graphical user interfaces (GUIs) in their Interaction Engineering course. Their workflow involves market research, usability testing and prototyping their design solutions. The challenge? Putting the user in the spotlight. The key to their success? Prototyping solutions that really benefit the user.

Empathy behind usable interfaces

In software creation, interaction engineering concerns designing solutions to problems with the software’s architecture. In software teams, interaction engineers help to bridge the communication and knowledge gaps between designers and software developers – being able to speak both languages. Whilst the role of UX designers is to create interfaces, sites and apps in favor of the user, the role of software engineer has traditionally been to build a usable system. The idea behind Interaction Engineering is that engineers create digital solutions that are both of accessible and in the best interest of the user. This is what Narcís Parés, Tenured Associate Professor of the ICT Department at UPF, and his team of teachers, have been looking to instill in their undergrad students.

“Engineers shouldn’t limit themselves to development and low-level technical issues. They should be getting into the design aspects, not graphical design, but interaction design.” Prof. Parés

The challenges

UPF’s students were working on a project to find design solutions to functional problems within existing graphical user interfaces (GUIs) of websites. Through performing contextual inquiries, evaluations of the interfaces, usability testing and the creation of functional wireframes of the redesigned websites with Justinmind, the students were expected to overcome the following challenges:

  • Improving the design and functionality of the GUIs without enhancing the functionality of the system. The students were only allowed to tweak the interactive aspects. To be clear, they were allowed to simulate interaction in their new UIs, as long as the level of functionality didn’t surpass that of the original UI.
  • Putting the user in the spotlight by building smart interfaces that anticipate their needs and expectations.
  • Building functional prototypes of their redesigns without access to the programming code behind the original UI.

Evaluation criteria

Students were scored based on the following criteria:

  • Their applied knowledge of UX designer disciplines – i.e. showing empathy towards the user through improvements to current designs and creation of enhanced user experiences
  • Their understanding of interaction design methodologies by creating engaging user interfaces prototypes with a particular focus on user behavior

Download Justinmind today and start UI prototyping 

DOWNLOAD FREE


The redesign process broken down

Review and assessment of the current state of the GUI

Prior to redesign, students performed a round of review and assessment in order to better understand the gaps in the current user experience and usability of real case ‘problematic’ GUIs that they chose. They performed contextual inquiries with real users. By observing how these users interacted and engaged with the user interface, they were able to collect immediate and accurate feedback based on testers’ responses.

Additionally, students designed usability questionnaires, focusing on production and demographic, to gather field data.

Creation of use cases to evaluate performance of original GUIs

With a focus on usage-centered design, students began to define user roles and draw use cases so as to capture precisely the solutions they wanted to produce. They also built navigation maps, without no specific placing of UI elements or functions (an abstract content-space based design technique), so as to focus their attention on defining their projects’ requirements.

Visualizing concrete solutions: the prototyping phase

This is where the course brings prototyping into the mix. Students started to build concrete solutions through visual and functional prototyping with Justinmind. Students were encouraged to think about how they would place components on-screen. The right positioning of content helps to create coherent user flow through across UIs.

The class used Justinmind to prototype the redesigns of their UIs – using the dynamic panels to group different elements in an interactive space. Among the interactive components that were built using Justinmind were image carousels for home pages and sticky menus with real-time scroll functionality. One student even developed a log-in form with regex, checking for usernames based on email addresses, and passwords.

interactive-prototypes-carousel-with-justinmind
Example of an interactive carousel you can prototype with Justinmind

Alongside dynamic panels, the students also use the Events Management system to control changes and animations in and between the dynamic panels.

Formal usability testing

Once the students are satisfied with their GUI redesigns, they perform a round of usability testing to see how users will interact with the solutions. This involves a follow-up questionnaire, a debriefing, focus groups and user interviews in order to get the most out of the results. UPF professors encourage students to define context (e.g. supermarket website – online shopping).

Empathizing with the user through prototyping

As a low to high interaction and visual design and prototyping tool, Justinmind has been the tool of choice on his Interaction Engineering course for the past four years. The principle aim of prototyping on UPF’s course is to get students thinking about the conditions of their user interfaces through the eyes of the user. By choosing eCommerce and commercial GUIs to redesign, the students engage with interfaces that users interact with on a regular basis.

upf-justinmind-prototype-simulation
Simulation of a web prototype redesign in Justinmind

 

Through prototyping the new structure of the GUI, they appreciate the value that design activity has on the overall redesign. They are taught to consider the existing experience that the user has (through initial review and user testing of the initial GUI), explore avenues for potential growth and improvement and communicate these improvements through visual and functional prototypes.

Interaction & the discipline of communicating the bare minimum

Interaction plays an interesting role in UPF’s IE course. Whilst it may seem obvious that the students develop their interaction engineering skills on this course – the trick is in the title – what Prof. Parés is actually looking to communicate is how to use interaction effectively. What we mean by this is understanding when to up the level of interaction and when to hold off. Why teach this? Because learning how to communicate just enough to achieve a desired result makes you more effective and reduces the risk of wasted resources.

Prototyping is an excellent method of teaching this discipline, through what we know as the fidelity spectrum. As described here by Smashing Magazine, fidelity refers to the “degree of exactness with which something is reproduced”.  When it comes to designing your software before actually coding it, a lot of designers and interaction engineers will get involved with sketching, mockups, wireframes, and prototypes to help them map out and visualize what they will later build.

upf-justinmind-low-fidelity-wireframe
Low fidelity wireframe made with Justinmind

When it comes to this phase of the software creation process, it’s wise to stick to the lowest level of fidelity possible to achieve the desired result. Why? Because the easier it is to achieve your desired result, the less effort, resources and time it takes out of your project’s budget. If it shows what you need to visualize, then it’s good enough at this stage of the process.

Keeping things simple with code-free design

Another reason why students use Justinmind prototyping tool, despite this being an engineering course is because prototyping keeps things simple when you’re trying to learn. In the past, Prof. Parés’ students had been using HTML to recreate their GUIs – but for first year undergrads with varied experience with front end languages, it proved challenging to strike a balance that everyone would be comfortable with. With a code-free prototyping tool, students are now able to focus on the quality of their redesigns and not worry about how they are going to achieve them.

Outcomes

Prof. Parés tells us that the students’ performance has improved immensely thanks to the visual capabilities of Justinmind. With limited time each week, timing is very important. By consolidating their design work in a single prototyping tool, students have sped up their workflow without having to split their attention across multiple tools. Plus, he says, the final result – a fully functional prototype – is very satisfying to interact with.

As for the learning curve, Prof. Parés confirms that students are easily able to climb the prototyping ladder with Justinmind and they can quickly build simple redesigns. All in all, Justinmind is a great tool for introducing first year undergrads to the design side of interaction engineering.

download_free

Emily is Marketing Content Editor at Justinmind

2 comments

Your email address will not be published. Required fields are marked *

Download Free