[UX] How to practically use Adobe Xd and Microsoft Powerpoint at work

Recently I have conducted a test project with XD on my blog, and I think about how to practically use both Adobe Xd and Microsoft Powerpoint at work. Apparently, those are all great tools for UX work like wireframe design and scenario description by the way. 

xd_and_powerpoint

1. The most powerful thing of Adobe Xd

Adobe Xd is very specialized in wireframe work. You can easily copy and paste the page level after designing some wireframe. In addition, when you work in the cloud workspace, you can manage your design asset. For example, you can make the group with some components, or quickly reuse them in different pages. 

Moreover, you can make the contents area over the screen area because Adobe Xd support scroll action about the contents over the screen. Sometimes we need to define some different types of contents in the service, but Microsoft Powerpoint has a fixed workspace to express this contents. Of course, you can just ignore the canvas outline and draw the wireframe continuously whatever you want, but this is very hard to review for other co-workers. 

Most of the powerful feature of Adobe Xd is what you can draw the real size wireframe with vector image, and you can export the layout guideline including the detail size information like margin, padding, or so on with Zeplin. I think this can improve the productivity so much to the workers. 

Adobe Xd also support to define the interaction between the pages or the components like other wireframe tools, but I don't think this feature is not the best for the practical work. Actually there are so much scenarios about the error or exceptions, and I have never seen any kind of tools to support this work. I think I would rather define this scenario with description not an real action with this feature.

This interaction feature can be good in the beginning step to show the conceptual design or working prototype somehow, but it is surely limited to state all interactions in the service. That's why I still believe the description for the interaction should be finished by the text descriptions. 

Adobe Xd has a feature to explain the scenario or the discussion when the project is shared in the cloud workspace, but it's still weak and unclear to explain all of them. For example, you can't explain each component in the page. I mean you should just try to discuss in the page level. That means if you have lots of components in a page, and the component are defined similarly, the discussion between co-workers must be very tough.

You can still leave the identifier in the wireframe for this, but that's not easy to manage and there will be lots of work for the only identifier. Therefore, I don't recommend to use the tool for this work. As I mentioned, Adobe Xd is still powerful to define just wireframe itself. 


2. The most powerful thing of Microsoft Powerpoint

I think Microsoft Powerpoint is still one of the powerful wireframe tool like other tools as I stated in the previous article.

Especially, Microsoft Powerpoint support vector image drawing from office 2019, so you can make the clear and smooth wireframe with this tool. By the way, this consequence is not managed by the real size, so you should work for the layout guideline separately. 

This limitation makes the productivity very low, and it hadn't been efficient at all for all workers. 

However, I think Microsoft Powerpoint has a powerful description features. You can easily and quickly edit each component from the wireframe and describe the scenario with the element. 

This means you can design or edit the component of the wireframe, and you can also easily define the flow chart to express the service logic or some algorithm. Plus, you can leave a note for the discussion, and manage the document version as well as long as you can design the document well. (I already mentioned some tips for this in the previous article.)


3. The best solution between Xd and Powerpoint

In this approach, we should be flexible at work. If I use both of them at work for the productivity, I will draw the wireframe with Adobe Xd in the main pages, but I don't draw all cases like error cases, exceptional cases, or so on with Xd. If I can just define the rule for the layout guideline including the real size of the components, I don't mind drawing the sub-pages with Powerpoint. 

This may make you feel tired of managing both Xd and Powerpoint document. However, as long as you can distinguish what tool you would work in the case, that doesn't mean you should do the redundant work. 

In addition, I would rather state any kind of scenario in Powerpoint document than Xd. This means the final consequence including wireframe and scenario will be the Powerpoint document. I may be able to snip some components from the wireframe made by Adobe Xd, and I will leave the identifier to distinguish each component in the wireframe or flow chart.

As I also mentioned as above, I prefer to define the interaction between pages or component by the text in the Powerpoint document because there is no tool to define any kind of interactions including errors or exceptions. (This means tools support to define multiple interaction with a component for the interactions, but that's not realistic to develop the tools for them because those tools are just developed for the prototype design anyway. Be sure we should not forget this limitation at work.)


Work type

Adobe Xd

Microsoft Powerpoint

Wireframe

GUI guideline
(Layout size work)

(with Zeplin)

UI/UX scenario
(Flow chart for logic, description for each component from the wireframe, description for interaction and cases of the component)

4. Summary

I am sure there is no ultimate tool for the work so far. Unfortunately, this means we should learn the skill for the new tool, and we must think how to make our process efficient constantly. When we make an effort to do this, we can surely improve our process and save the time and expense for the project.  Feel free to discuss about the topic and always welcome to talk about that. Please leave a comment for any idea. See you around.

댓글

인기 게시글

[오류해결] KMS 인증(Activation) 오류(error) 0xC004F017 문제 원인 및 해결 방법

[오류해결] 카카오톡 PC 버전 접속 오류(일시적인 장애이거나 네트워크 문제일 수 있습니다. 잠시 후 다시 이용해 주세요. 오류코드 70101, 11002, LL)와 다음(daum.net), 티스토리(tistory.com) 접속 오류(오류코드 DNS_PROBE_FINISHED_NXDOMAIN) 문제