May 19, 2013 at 23:50Property Search Interface
I think many of you, dear habitura, at least once had to decide the question of renting or buying a home. Then, probably, you went to Google, typed something like “renting an apartment <city>”, after which these “wonderful” interfaces started to load in numerous tabs:
I won’t talk about the problems of these interfaces. In any case, I believe that the millions of people who every day try to find a place to live are definitely worth the best.
In this article I will tell you how to quickly and cheaply create a prototype of a completely decent site for finding real estate. Fans to read about usability, please under the cat.
It is necessary to develop a site prototype for convenient search for real estate objects that want to buy, sell, rent or lease. The interface should be universal in terms of user experience, i.e., ideally, they should immediately be used by everyone, from small to large.
The interface will be used by people with very different levels of computer literacy and with different habits. But, when we pick up a pencil, knowing about it in itself will be useless, because we will not have pictures of our target user in our heads.
To solve this problem, it is necessary to form a collective image of all these people and their experiences of use. To do this, you need to show a little imagination. I was lucky, one kind person gave me access to Yandex.Metrica of such a site with good traffic, so apart from the imagination, I also had some statistics.
We take a tool for creating mental maps and come up with our character. Some facts may be completely fictional, but at the same time they should be, presumably, the most likely:
If you try not to hesitate to run your eyes over this map, a certain abstract image of this Masha will form in your head. I immediately recall such “Mashi” from real life, and everything becomes clear: what is on her mind, how does she own a computer, what does she think of such real estate sites, and so on. All this is enough to design not just an interface, but an interface for people like Masha. To enhance your own impression of this image, you can add an expressive photo card:
I must say that I am not a supporter of long and detailed portraits of users, except if it is not a question of any highly specialized automation system. Practice has shown that the simpler and shorter the portrait, the more often the designer will use it during the creation of the prototype, and after all, a portrait is created precisely for this.
A pencil is the surest way to literally get an interface prototype in a matter of hours at a level sufficient to coordinate conceptual issues with the customer, so I really like a pencil. He also saves a bunch of man-days and nerves, and is also an excellent excuse to distract tired eyes from the monitor. The main thing during the creation of a paper prototype is not to overdo it with detail: in each such prototype there is a certain boundary point, starting from which all subsequent improvements are faster in an interactive analogue on a computer than on paper.
Let's get back to our interface. First you need to decide on the main blocks and their location on the page. Our Masha has a small HD monitor at work, an iPad at home. Both screens are rectangular. She could also have some kind of netbook, which is also rectangular, but with a small resolution. Actually, we draw a rectangle:
Since Masha wants to search for real estate, she will need at least a list of these objects. Of course, there are not 10 of them, and you should also add a block with filters from this list. On Masha’s monitors, horizontal areas are especially valuable in terms of using the rectangle’s space, so we’ll use a vertical strip as a filter. The problems with returning to the filter after a long scrolling of the list of objects are immediately resolved: the filter will simply always be on the side, in the same place.
Masha does not crawl out of Vkontakte, so she is more familiar with choosing something on the left, and absorbing the content on the right. Anyway, the traditional area for vertical navigation is the left page bar. Therefore, we will place our filters for starters on the left, and if we understand that it’s better on the right, we will place them on the right (after all, this is a paper prototype, everything can be done here):
For Masha, distance from the metro, parks and major roads is important. The fastest way to show all this is by marking the address of the object with a dot on the map. There will be several objects in our issue, so we will make a common map for these objects:
It seems that while Masha is happy with everything, so let's move on to the details. As I said, it’s important not to get carried away with them, but some key elements are still worth showing.
Let's start with the filter. In general, real estate objects have a lot of parameters, but they can be conditionally divided into two groups: necessary and not needed by most. Parameters from the second group can always be hidden in some kind of pull-out or drop-down element, so we won’t think about them yet. From the first group, we still have the type of announcement (rent, sale, etc.), the type of property, the distance from the metro and the price.
The filter block should show only relevant interface elements. For example, if the type of object “room” is selected, then the choice of the number of rooms in the apartment must be hidden. Our Masha slowly prints (according to legend, because of long nails) and prefers to use only a mouse. Therefore, Masha should be able to set all the search parameters without using the keyboard. We get such a block with filters (I blurred the rest of the prototype so as not to be distracted by it):
Let's move on to the list of objects. Let's think about why Masha can choose one of two objects of approximately the same parameters. Apparently, because the photograph of this selected object is closer to the image of the ideal apartment, which is in Masha’s head. Since the parameters usually do not change much from object to object, in the first place her eyes need to slip a photograph (of course, the best one), and only then the price and everything else. Everything else is desirable to submit as systematically as possible and on the case, so as not to spend valuable man-seconds on the recognition of the parameters of each ad. I decided to make a set of standard object parameters in the form of tags.
Above the list, place the number of ads found and the type of sorting. Ads will be loaded from the server in batches when scrolling. When you hover over an ad, buttons to add to favorites and highlight an object on the map will appear. Here's what happened:
It remains to add the card itself and the main interface is ready: A
bit scary, but fast and cheap. But you can discuss the interface and, if necessary, remake everything just as quickly and cheaply. Now leave the pencil and move on to creating an interactive prototype.
To create an interactive prototype, you can open notepad and write a ton of html code. However, I prefer to spend time on more interesting classes, so I use special software for dynamic prototyping, namely, the good old Axure.
To begin with, we will transfer to the interactive prototype what is already drawn on paper. Everything is simple here, there is nothing special to explain, this is a matter of technology:
We only have two interfaces: the choice of metro stations and the page of the announcement itself. Let's start with the subway.
Our Masha is looking for an apartment in the east of the blue branch outside the ring line. She also looks at the advertisements at the company because her husband works there. Let her choose it all in a couple of clicks:
Metro stations chosen. It remains only to come up with an announcement page. In fact, renting, and even more so buying a home, is an important milestone in Masha’s life, so she cares about a lot of nuances: is there a freight elevator to transport her favorite closet, how far the kindergarten she will take the child to, is there special parking at home with places for residents, because Masha does not like to park spontaneously. We will divide all this chaos of information about the object into three parts: information about the apartment, about the house and about the area. Let's place all this sequentially on one page with the ability to quickly move between sections. To do this, we fix the navigation bar on top so that it does not fall into the scroll area:
That's all. You can click on the live prototype here .
Through simple manipulations with a pencil and mouse, we got a prototype interface in which our Masha (and therefore the vast majority of the target audience) could conveniently and comfortably sit out the best days of her life in search of suitable housing. The result from the introduction of such an interface can only be positive: loyal customers, increased conversion and traffic for a real estate agency; comfort and time saved for trying to understand the interface - for customers.
In the end, I allow myself a little PR.
The information system is not the last place in your business, and you already realized that usability in the conditions of fierce competition is “must have”? Then welcome to the site of our usability bureau . We will help if not by deed, then by good advice - for sure.
Didn't find anything new for yourself in this article? Are you sure you could do better? Then we are waiting for your outstanding prototype portfolios at hr@uxman.ru . Perhaps there are a couple of interesting puzzles for you.
Thank you for your attention and waiting for your comments!
I won’t talk about the problems of these interfaces. In any case, I believe that the millions of people who every day try to find a place to live are definitely worth the best.
In this article I will tell you how to quickly and cheaply create a prototype of a completely decent site for finding real estate. Fans to read about usability, please under the cat.
Formulation of the problem
It is necessary to develop a site prototype for convenient search for real estate objects that want to buy, sell, rent or lease. The interface should be universal in terms of user experience, i.e., ideally, they should immediately be used by everyone, from small to large.
Before picking up a pencil
The interface will be used by people with very different levels of computer literacy and with different habits. But, when we pick up a pencil, knowing about it in itself will be useless, because we will not have pictures of our target user in our heads.
To solve this problem, it is necessary to form a collective image of all these people and their experiences of use. To do this, you need to show a little imagination. I was lucky, one kind person gave me access to Yandex.Metrica of such a site with good traffic, so apart from the imagination, I also had some statistics.
We take a tool for creating mental maps and come up with our character. Some facts may be completely fictional, but at the same time they should be, presumably, the most likely:
If you try not to hesitate to run your eyes over this map, a certain abstract image of this Masha will form in your head. I immediately recall such “Mashi” from real life, and everything becomes clear: what is on her mind, how does she own a computer, what does she think of such real estate sites, and so on. All this is enough to design not just an interface, but an interface for people like Masha. To enhance your own impression of this image, you can add an expressive photo card:
I must say that I am not a supporter of long and detailed portraits of users, except if it is not a question of any highly specialized automation system. Practice has shown that the simpler and shorter the portrait, the more often the designer will use it during the creation of the prototype, and after all, a portrait is created precisely for this.
Now is the time to pick up a pencil
A pencil is the surest way to literally get an interface prototype in a matter of hours at a level sufficient to coordinate conceptual issues with the customer, so I really like a pencil. He also saves a bunch of man-days and nerves, and is also an excellent excuse to distract tired eyes from the monitor. The main thing during the creation of a paper prototype is not to overdo it with detail: in each such prototype there is a certain boundary point, starting from which all subsequent improvements are faster in an interactive analogue on a computer than on paper.
Let's get back to our interface. First you need to decide on the main blocks and their location on the page. Our Masha has a small HD monitor at work, an iPad at home. Both screens are rectangular. She could also have some kind of netbook, which is also rectangular, but with a small resolution. Actually, we draw a rectangle:
Since Masha wants to search for real estate, she will need at least a list of these objects. Of course, there are not 10 of them, and you should also add a block with filters from this list. On Masha’s monitors, horizontal areas are especially valuable in terms of using the rectangle’s space, so we’ll use a vertical strip as a filter. The problems with returning to the filter after a long scrolling of the list of objects are immediately resolved: the filter will simply always be on the side, in the same place.
Masha does not crawl out of Vkontakte, so she is more familiar with choosing something on the left, and absorbing the content on the right. Anyway, the traditional area for vertical navigation is the left page bar. Therefore, we will place our filters for starters on the left, and if we understand that it’s better on the right, we will place them on the right (after all, this is a paper prototype, everything can be done here):
For Masha, distance from the metro, parks and major roads is important. The fastest way to show all this is by marking the address of the object with a dot on the map. There will be several objects in our issue, so we will make a common map for these objects:
It seems that while Masha is happy with everything, so let's move on to the details. As I said, it’s important not to get carried away with them, but some key elements are still worth showing.
Let's start with the filter. In general, real estate objects have a lot of parameters, but they can be conditionally divided into two groups: necessary and not needed by most. Parameters from the second group can always be hidden in some kind of pull-out or drop-down element, so we won’t think about them yet. From the first group, we still have the type of announcement (rent, sale, etc.), the type of property, the distance from the metro and the price.
The filter block should show only relevant interface elements. For example, if the type of object “room” is selected, then the choice of the number of rooms in the apartment must be hidden. Our Masha slowly prints (according to legend, because of long nails) and prefers to use only a mouse. Therefore, Masha should be able to set all the search parameters without using the keyboard. We get such a block with filters (I blurred the rest of the prototype so as not to be distracted by it):
Let's move on to the list of objects. Let's think about why Masha can choose one of two objects of approximately the same parameters. Apparently, because the photograph of this selected object is closer to the image of the ideal apartment, which is in Masha’s head. Since the parameters usually do not change much from object to object, in the first place her eyes need to slip a photograph (of course, the best one), and only then the price and everything else. Everything else is desirable to submit as systematically as possible and on the case, so as not to spend valuable man-seconds on the recognition of the parameters of each ad. I decided to make a set of standard object parameters in the form of tags.
Above the list, place the number of ads found and the type of sorting. Ads will be loaded from the server in batches when scrolling. When you hover over an ad, buttons to add to favorites and highlight an object on the map will appear. Here's what happened:
It remains to add the card itself and the main interface is ready: A
bit scary, but fast and cheap. But you can discuss the interface and, if necessary, remake everything just as quickly and cheaply. Now leave the pencil and move on to creating an interactive prototype.
Interactive prototype
To create an interactive prototype, you can open notepad and write a ton of html code. However, I prefer to spend time on more interesting classes, so I use special software for dynamic prototyping, namely, the good old Axure.
To begin with, we will transfer to the interactive prototype what is already drawn on paper. Everything is simple here, there is nothing special to explain, this is a matter of technology:
We only have two interfaces: the choice of metro stations and the page of the announcement itself. Let's start with the subway.
Our Masha is looking for an apartment in the east of the blue branch outside the ring line. She also looks at the advertisements at the company because her husband works there. Let her choose it all in a couple of clicks:
Metro stations chosen. It remains only to come up with an announcement page. In fact, renting, and even more so buying a home, is an important milestone in Masha’s life, so she cares about a lot of nuances: is there a freight elevator to transport her favorite closet, how far the kindergarten she will take the child to, is there special parking at home with places for residents, because Masha does not like to park spontaneously. We will divide all this chaos of information about the object into three parts: information about the apartment, about the house and about the area. Let's place all this sequentially on one page with the ability to quickly move between sections. To do this, we fix the navigation bar on top so that it does not fall into the scroll area:
That's all. You can click on the live prototype here .
Conclusion
Through simple manipulations with a pencil and mouse, we got a prototype interface in which our Masha (and therefore the vast majority of the target audience) could conveniently and comfortably sit out the best days of her life in search of suitable housing. The result from the introduction of such an interface can only be positive: loyal customers, increased conversion and traffic for a real estate agency; comfort and time saved for trying to understand the interface - for customers.
In the end, I allow myself a little PR.
The information system is not the last place in your business, and you already realized that usability in the conditions of fierce competition is “must have”? Then welcome to the site of our usability bureau . We will help if not by deed, then by good advice - for sure.
Didn't find anything new for yourself in this article? Are you sure you could do better? Then we are waiting for your outstanding prototype portfolios at hr@uxman.ru . Perhaps there are a couple of interesting puzzles for you.
Thank you for your attention and waiting for your comments!