Theories of mobile websites
In many cases, we are constrained by clients and the conceptual models they follow. For customers to learn the potential of mobile web sites, they need to think beyond desktops and applications.
With the introduction of different screen sizes for mobile web sites, device permissions and functionality have to work much more. It is necessary to create more markings of the frame, it is required to provide a different gesture interaction and support a wide range of functionality. All to the same folds in a considerable amount of time testing. And yet, the time and cost are justified, especially when compared to the cost of trying to adjust the optimization to your project depending on the device. Rational arguments can be made to justify longer production times, and most companies may seek additional resources if they wish.
There is a greater obstacle than time or cost: the obstacle is change.
Change is hard.
It’s hard to change the way we’re used to doing things. It is terrible to break conventions. Being human, we are not naturally disposed to it. Saying “No time, no money” is much easier than investing in a strategy of progressive thinking that requires a fundamental shift in the concept of the website. We fight the stereotypes we collectively create for the web. Ask anyone to imagine a website, and they will draw a 960-pixel layout, comfortably placed in a desktop browser window. Ask him to imagine a mobile website, and he will surely confine himself to the idea of the application. It will present a simple interface based on the description of tasks, with limited content, minimal navigation and elegant transitions. Desktop and mobile: two completely different animals.
We continue to destroy the web every time we encourage users to choose: desktop or mobile website.
EXPECTATIONS: THE OBSTACLE OF THE PROJECT
You need to unlearn yourself and wean customers from the obstacles that contribute to the expected results of the projects. It is necessary to leave outdated habits. That’s easier said than done, so let’s start storming the problem. Below I will share with you the methods used to change people’s perceptions of the mobile web; if you have other or different methods, let’s hear about them. How to force themselves and their customers to drop those conceptual models, which are prone to?
EFFECTIVE RATIONAL MOTIVE (YET)
Start by creating an exciting business argument for a more responsive approach to the web. Bombard stakeholders with mobile statistics, research, and real-world applications. If they seem to be “hooked” on creating mini-websites with randomly selected content, then discuss fragmentation of screen sizes. Pay special attention to the “dark” area between large smartphones and small “tablets”. Ask them to determine at what screen size the interface should turn on and remove the content from the user’s reach. If you are able to create a reliably prepared case, then you should have a full room of people who have seen the light and are amenable to a new approach. Rational arguments for responsive design will allow you to go so far because:
You ask others to reject the familiar system with which they are familiar and feel comfortable;
The concept remains abstract, creating a gap between theory and reality.
If the client is unable to imagine how his websites adapt to the variety of screen sizes, it will be difficult for him to decide on this approach. As a result of uncertainty, people revert to trusted tradition.
If you want to bring customers to new ways of thinking, the path will help to identify joint sketches.
When managing customers on an unconventional road, the first steps are always easy. How will you move them forward and prevent them from coming back from the middle of the road?
USE SKETCHES AS A FORM OF EXORCISM
The expected results of the design are formed at the moment when the team members begin to imagine the project. While there is planning and discussion, the form of mental images become clearer. There may be a situation where you find yourself doing the design of what is on the mind of the client, instead of creating a design for the purpose of the project and the needs of the user. To get people to accept new ideas, you need to banish old ones. This is where the sketching comes in. We often think of sketches as a way to generate and share ideas, but they can also be called weapons of destruction. The purpose of sketching here is not to produce drawings that convey the final design. We are not a substitute for the process of gaining interaction experience (UX). The goal is to remove stubborn, stiff ideas and make room for new ones.
Create a work plan
The steps outlined below reflect the current process. While each is valuable individually, consider how they will work together along the way to manage the group’s thinking. Try to constantly approach the design from different angles, alternating techniques that require the group to focus (convergent thinking) and require research (divergent thinking). Conflicting ideas may arise as you progress. Take advantage of these points of disagreement, as they may be the key to breaking intractable speculative models.
The current process of working on our plan is as follows:
Set, define goals. Place the objectives of the work in accordance with the priority. Set the rules and criteria by which ideas will be discussed and evaluated.
Sketch the frame of the comic book. Set the content that exists outside the screen. Give people an area where you can create a model.
Mobile-first. Ask the group to focus on the user’s information hierarchy and goals. Extract of the brain “malacarne” ideas (especially those heavy, centered on the application) and place it on the paper.
6-up templates. Enter a conflict. Certainly among what drew the group for mobile devices and the fact that she provided for the website of the desktop, there are discrepancies — explore this discrepancy. Squeeze out as many ideas as possible from the minds of the participants.
Outline of the concept. Together, rebuild ideas into new models that work regardless of screen size or device size.
DETERMINE BUSINESS GOALS OF WEBSITE AND USER NEEDS
Time: 30 to 60 minutes.
Set and prioritize goals. Before you start drawing, we will try to define some parameters. Let’s start by setting the goals of the website, which will provide a link to the broader objectives of the organization. It is important to avoid anything that describes individual functionality characteristics. “Quick links” and “rotating slideshow” are not goals. Do on Board or a large sheet of paper list as many goals, assigning each priority.
Define your audience and user needs. Next, create a new list of user needs. This information should be extracted from real research and conversations with users. In the worst case scenario, if you are unable to name any, you can roughly estimate the client’s understanding of his target audience and what he perceives its needs. Start by identifying a core group of users and making a list of tasks that they will have to perform on the website. If making a list of actionable tasks is the complexity, think about the issues that may arise in this audience when you log on to the website. First, what motivates them to enter, and what information might be most valuable to them? After brainstorming on the needs of your primary target audience, move on to secondary audiences.
Brainstorm mobile capabilities. Now that you’ve created a list of website goals and user needs, it’s time to start growing your mobile seed. At this stage, our goal is to shift from the usual way of thinking that a mobile website should be optional or “lightweight”. I’ll make the group think about what opportunities arise when a user is not tied to a table. What if he’s lying on the couch, at work, or walking around? As the possibility of different types of devices offer the ability of interaction with a previously existing content? The challenge here is to generate a lot of different ideas, even if some of them are incredible. Encourage people to add rather than subtract from the website.
This exercise should not tire, so try to spend no more than an hour.
Once you’re done with the setup, it’s time to start sketching. Sketch exercises seem to vary slightly from time to time depending on the dynamics and size of the group we are working with. Counting the number of participants, we will try to limit the working groups to about 10 or less people. So everyone gets a chance to work individually, but the group is large enough, and can be divided into small teams. Than more in group individual pieces of, the better. Sketches should be simple and, more importantly, humorous. This leads us to the first exercise: comics from frame figures.
To create the comics of the figures-sticks easily. Divide your group into teams of two. Give each piece of paper filled with square sections and ask them to draw a rough sketch-a comic reflecting a member of the target audience entering the website and fully performing their task. We recently used this technique when working with the University of Mariana (Marian University) in Wisconsin (Wisconsin). To set the direction for your budding artists, we clarified the task: “Start drawing a story in pictures with a character representing your target audience. The comic doesn’t start with your website. Think of the place where the story begins. What motivates him to visit the website, and what actions does he take by going to it? What kind of device is he using?”
In a University working group, one team described the story of a teenager tied to his friends and hometown who doesn’t want to go far from school. He loves sports, but not so talented to play for a big University. He is pleased to learn that this University offers participation in sports life and has a large number of student residences. He will be able to live a student life, while being a short distance from home. The sketches showed the main character entering the website and interacting with different pages.
Current trends and approaches in web development
Learn the algorithm of rapid growth from scratch in site building
Drawing comics is an interesting way to present new uses of the site, although it can be unpredictable.
These storyboard comics are great because they make you turn lists of needs and goals into narratives. The layers of abstractions peel off as participants tell a detailed story about how they represent the individuals who use the website. Thus, the conversation is moving in the right direction, getting the parties interested in how the website plays a role that expands beyond the screen and penetrates into human life.
TEMPLATES 3-UP MOBILE-FIRST
Time: 30 minutes plus discussion.
We made the participants think in the right direction: stories about people using the website. Then we focus on the interface of the website. I’ll show up on a Board filled with notes about users and tasks, and note that including it all in one page won’t work. After a brief reminder of the mobile-first approach, we hand out 3-up templates to everyone in the room, and then decide on whose main page (s) to focus on. Instructions for this exercise: “Allow your user to use a device with a small screen. There is no space for complex interactivity, and the space for presenting content is limited. What will you show on this page? Focus on the priority of the content and the actions that need to be stimulated.”
With this and other sketching exercises, make everyone focus on the adaptability of the content, not the container. Because brainstorming and storyboarding encourage broad thinking and experimenting with a wide range of ideas, this exercise is designed to test these ideas. Narrow page templates require employees to focus and draw only the most important ideas and elements of the page. At this stage, many sketches will still look like attachments. At first, this is normal and expected. When drawing is over, ask each participant to explain their ideas to the rest of the group.
Mobile templates force participants to focus on important content and actions.
RESPONSIVE TEMPLATES 6-UP
Time: 30 minutes (no discussion)
If it were possible to go through all the sketches and the design process without falling into outdated traditional beliefs, it would be great. But while we have come so far with new ideas, nothing has really been done to get rid of “sleeper agents” — ideas about “what a website should be like” that are so deeply ingrained that they have to come up again.
In the 6-up sketch exercise, we will ask each member of the group to separate their original ideas from the 3-up sketches and consider applying them to different screens. If new page elements are presented, they should be justified and directly linked to the user’s previously defined tasks or requirements of the website. We have slightly modified the traditional 6-up exercise so that there is variability between the proportions of the six panels; the blocks are still small, so the figures remain approximate. In this exercise, I like the fact that it encourages participants to go beyond their original ideas and learn new ones. That’s where you’ll see people desperately trying to do something like a horizontal navigation bar or a sliding image rotator. They are trying to reconcile their momentum to introduce these standard elements with the tasks and stories the group has already worked on. Of all the exercises, this seems to be the most difficult.
The 6-up pattern encourages participants to go beyond their original submissions and pushes for new ones. This could be a lot of chaos.
After about 10 minutes, when most have already sketched out the simplest ideas, I often go through and hand out “Mental Notes” (see below) to inspire participants to think about the goals and behaviors they would like to encourage. After the establishment of the sketches we move straight to the outline of the concept, without group discussions.